MVC 4局部視圖導致頁面在提交時變得無響應

Question

情況：在我的C＃/ MVC 4解決方案中，我正在使用一個視圖，其中包含部分視圖。該視圖是一個帶有提交按鈕的表單。局部視圖是隱藏的div，但是如果選中複選框，則可以顯示該div。

問題：如果部分視圖隱藏，則提交正常工作。如果部分視圖未隱藏，則提交會導致頁面無響應，如果等待3分鐘左右，則提交最終會按預期工作。

代碼如下。提前感謝您的考慮。我是新手開發人員，因此歡迎所有評論，建議和批評。

代碼：

型號

namespace MyModels 
{ 
    public class MainModel 
    { 
     public SelectListItem Things { get; set;} 

     public IEnumerable<OtherModel> MoreThings { get; set;} 
    } 
} 

查看 //名爲MyView的 @model MyModels.MainModel @using MyModels @if（型號！= NULL）{

using (Html.BeginForm("MyViewName", "MyControllerName", FormMethod.Post, new { id = "view-form" })) 
{ 
    @Html.LabelFor(model => model.things) 
    @Html.DropDownList("", (Selectist)ViewBag.things) 
    @Html.ValidationMessageFor(model => model.field1) 

    @Html.CheckBoxWithLabel("aNameAttribute", Model.valueAttribute.ToString(), "anIdAttribute", Model.valueAtttribue ==1, "aLabel", "a_Toggle_Class") 
    <div class="treeview" style="display: none;"> 
    <fieldset> 
     <legend>Title</legend> 
    //view causing issues replaces the div below 
    <div id="replacedDiv"></div> 
    </fieldset> 
    </div> 

    <p> 
     <input type="submit" value="Submit" /> 
    </p> 
} 

}

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      url: "/MyController/MyPartialView", 
      contentType: "application/html; charset=utf-8", 
      cache: "false", 
      type: "GET", 
      datatype: "html" 
     }) 
     .success(function (result) { 
      $('#replacedDiv").html(result); 
     }) 
    }); 
</script> 

管窺

//named _MyPartialView 
@model MyModels.MainModel 
@using MyModels 

@foreach (var moreThings in ViewBag.moreThings) 
{ 
    <div id="replacedDiv"> 
    <label> 
    <input type="checkbox" id=@moreThings.id value=@moreThings.name />@moreThings.name </label> 
    </div> 
} 

控制器

namespace Main.Controllers 
{ 
    public class MyController 
    { 
     [HttpGet] 
     public ActionResult Index(MainModel model) 
     { 
      return View(model); 
     } 

     public ActionResult MyView() 
     { 
      var model = new MainModel(); 

      return View(model); 

     } 

     public ActionResult MyPartialView(MainModel model) 
     { 
      <OtherModel> moreThings = BLotherModel.GetMoreThings(); 
      ViewBag.moreThings = moreThings; 

      return PartialView("_MyPartialView", promotion); 
     } 

     [HttpPost] 
     public ActionResult MyView(FormCollection collection) 
     { 
      MainModel model = new MainModel(); 

      return SaveModel(model); 
     } 
    } 
} 

Answer 1

在你的Ajax使用的是：

$('#replacedDiv").html(result); 

但是你的局部視圖包含在一個循環中產生的<div id="replacedDiv">

替換爲您的局部視圖代碼：

@foreach (var moreThings in ViewBag.moreThings) 
{ 
    <label>@moreThings.name </label> 
    <input type="checkbox" id=@moreThings.id value=@moreThings.name /> 
} 

，它應該是OK