通過ajax加載PartialView無法正確加載下拉列表中的所選項目

Question

這個例子是人為設計的，我有一個局部視圖，我是通過ajax在頁面上加載的。 局部視圖上有一個下拉列表。 如果我更改了下拉列表的值，然后在控制器中重置了該值。 當部分視圖再次加載（通過ajax）時，下拉列表無法正確獲取設置值。

加載局部視圖：

@model Test_PartailViews.Models.MyItemViewModel
@{
    ViewBag.Title = "Home Page";
}

<div id="partialViewGoesHere">  
</div>

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
<script>
 $(document).ready(function(){
      $.ajax({
        url: '/Home/GetForm',
        type: 'GET',         
        cache: false,
        success: function (result) {
          $('#partialViewGoesHere').html(result);
        },
        error: function (xhr, ajaxOptions, thrownError) {
          alert(xhr.status + ':' + thrownError);
        }
      });
 });
 </script>
}

帶有下拉列表的局部視圖

@model Test_PartailViews.Models.MyItemViewModel

  @using (Html.BeginForm("SaveForm", "Home", FormMethod.Post, new { id = "HomeForm" }))
  {
    <fieldset>
      @Model.MyItemId
      <div class="row">      
        <div class="col-sm-4 editor-field">

          @Html.DropDownList("MyItemId", new SelectList(Model.ItemOptions, "Id", "Name", Model.MyItemId), "Select One...")
          @Html.ValidationMessageFor(model => model.MyItemId)

        </div>
      </div>
      <input type="submit" value="Submit" />
    </fieldset>
  }

<script type="text/javascript">

  $('#HomeForm').submit(function () {

    $.ajax({
      url: this.action,
      type: this.method,
      data: $(this).serialize(),
      cache: false,
      success: function (result) {
        // reload the partial view that is returned from post
        $('#HomeForm').parent().html(result);
      },
      error: function (xhr, ajaxOptions, thrownError) {
        // show error occured
        $('#HomeForm').parent().html(xhr.status + ':' + thrownError);
      }
    });

    // show loading image when ajax call is made
    $('#HomeForm').html('');

    return false;
  }); // $('form').submit

</script>

控制器：

public class HomeController : Controller
  {

    // Main page that has the partial view on it
    [HttpGet]
    public ActionResult Index()
    {
      MyItemViewModel model = new MyItemViewModel() { MyItemId = 1 };
      return View(model);
    }

    // return partial view
    [HttpGet]
    public ActionResult GetForm()
    {
      // reset the id to 1
      MyItemViewModel model = new MyItemViewModel() { MyItemId = 1 };
      return PartialView("_MyItemPV", model);
    }

    // save partial view data
    [HttpPost]
    public ActionResult SaveForm(MyItemViewModel youModel)
    { 
       return GetForm();
    }
}

模型：

public class MyItemViewModel
  {

    public int MyItemId { get; set; }

    public List<MyItem> ItemOptions {
      get
      {
        List<MyItem> lst = new List<MyItem>();
        lst.Add(new MyItem() { Id = 1, Name = "One" });
        lst.Add(new MyItem() { Id = 2, Name = "Two" });
        lst.Add(new MyItem() { Id = 3, Name = "Three" });
        return lst;
      }
    }

  }

  public class MyItem
  {
    public int Id { get; set; }
    public string Name { get; set; }
  }

屏幕加載時，顯示ID為1，下拉列表為“ One”

將值更改為“兩個”並單擊提交之后。 我希望GetForm方法將模型值重置為1，並且下拉列表也將讀取為“ One”。 但是，即使ID為1，也會選擇“ Two”。

查看提琴手的結果后，我可以確認部分視圖返回的值為“ two”（已選擇）。

任何幫助，將不勝感激。

Answer 1

我之前遇到過類似的問題，清除控制器中的ModelState可以解決問題。 您也可以在ModelState中清除一個特定的值。

Answer 2

您在JavaScript中返回false。 這里是 -

$('#HomeForm').html('');

return false;

這應該返回true 。