獲取並保留選定的值作爲選項

Question

我試圖在我的應用程序中顯示將用作「選項」列表的下拉列表。用戶可以選擇一個適用於其他地方的選項。只要用戶停留在頁面上，這些數據就會持續存在。

這裏的下拉列表：

public class ResultsOptions 
{ 
    public string mStartOption { get; set; } 

    public List<SelectListItem> mListOptions { get; set; } 

    public ResultsOptions() 
    { 
     mListOptions = new List<SelectListItem>(); 
    } 
} 

這個對象，然後這樣使用：

[HttpGet] 
public ActionResult SetResults(string _submitButton, string _option) 
{ 
    mOptions.mListOptions = new List<SelectListItem>(); 

    foreach (var option in mListOptions) 
    { 
     if (!String.IsNullOrWhiteSpace(mResultOption)) 
     { 
      if (option == mResultOption) 
      { 
       SelectListItem item = new SelectListItem 
       { 
        Selected = true, 
        Text = option, 
        Value = option 
       }; 

       mOptions.mStartOption = option; 

       mOptions.mListOptions.Add(item); 
      } 
      else 
      { 
       SelectListItem item = new SelectListItem 
       { 
        Text = option, 
        Value = option 
       }; 

       mOptions.mListOptions.Add(item); 
      } 
     } 
     else 
     { 
      mOptions.mStartOption = ""; 

      SelectListItem item = new SelectListItem 
      { 
       Text = option, 
       Value = option 
      }; 
      mOptions.mListOptions.Add(item); 
     } 
    } 

    return PartialView(mOptions); 
} 

[HttpPost] 
public JsonResult SetResults(ResultsOptions _options) 
{ 
    if (!String.IsNullOrWhiteSpace(_options.mStartOption)) 
    { 
     mResultOption = _options.mStartOption; 

     mOptions.mStartOption = _options.mStartOption; 

     var selected = mOptions.mListOptions.First(_x => _x.Value == _options.mStartOption); 

     selected.Selected = true; 
    } 

    return Json(new { Message = "Option saved" }); 
} 

的mListOptions是包含Standard和Simple字符串的靜態列表。正如你可能已經猜到了，我做的，我在我的佈局呈現這樣的局部視圖：

<div> 
    <div class="float-left"> 
     @Html.ActionLink("Advanced Search", "AdvancedSearch", "Store") 
     @Html.ActionLink("Browse Promo Packs", "PackSearch", "Store") 
    </div> 
    <div class="float-right"> 
     @{ 
      Html.RenderAction("SetResults", "Store"); 
     } 
    </div> 
    <div class="clear"></div> 
</div> 

最後這裏的局部視圖：

@model MyApp.ViewModels.ResultsOptions 

<script type="text/javascript"> 
     $.post("/Store/SetResults/", $('#options').serialize(), 
       function(data) { 
        $('#divMessage').html(data.Message); 
       }); 
     </script> 

@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "options"})) 
{ 
    @Html.DropDownListFor(_model => _model.mStartOption, Model.mListOptions, new { @class = "nullify" }) 
    <input type="submit" name="_submitButton" value="Set"/> 
    <div id="divMessage"> 

    </div> 
} 

所以，基本上，我想要那個dropdownlist始終顯示爲可選列表。所選的值將在稍後使用，並且現在對顯示屏幾乎沒有任何影響。

但是我有一個問題，當我點擊「設置」按鈕時，我的視圖只有呈現局部視圖，其餘部分被刷新。不是我想要做的。誰能幫我嗎？

編輯

我一直在努力爲提出了一些Json的結果，但我有同樣的問題：獲得的結果消息是被後來顯示的ONLY事情。

Answer 1

這是因爲您在POST方法中返回了PartialView。如果你想保留整個視圖並只更新一部分html，你需要使用jQuery。

編輯：

return Json(new { Message = "Option saved" }); 

你必須使用jQuery的AJAX後提交表單：

您可以從您POST操作方法，給出了一個成功的消息或東西返回JsonResult。首先一個id分配給您的提交按鈕

查看

<input type="submit" id="submit-form" name="_submitButton" value="Set"/> 

然後通過發佈形式處理腳本中的單擊事件。

腳本

$("#submit-form").click(function(ev) { 
     ev.preventDefault(); 
     $.post("/Controller/SetResults/", $("#IdOfYourForm").serialize(), 
      function(data) { 
      $("#divMessage").html(data.Message); 
     }); 
    });