在 MVC 3 中，我有一个带有 3 个局部视图的视图。如何让第三部分视图显示在同一页面上？

Question

我有一个包含 3 个部分视图的视图。第一个部分视图有一个下拉列表。您从下拉列表中选择某些内容，然后第二个部分视图将在同一页面上的正下方加载。

然后我在第二个局部视图中有一个搜索表单 (html.BeginForm)，当我提交表单时，我想在第二个局部视图下打开第三个局部视图。

第三个局部视图有一个剑道 ui 网格，它采用模型。

现在的问题是第三个局部视图正在呈现在不同的页面上。

查看：

 <section>
      <div id="searchpanel">
          @html.Partial("_1stPartial")
          <div id="2ndPartialDiv"></div>
          <div id="3rdPartialDiv"></div>
      </div>
 </section>

局部视图2：

<section>
  <div id="searchblock">
     <table>
       <tr>
         <td>
            @using (Ajax.BeginForm("Search", "ControllerName", new AjaxOptions {  updateTargetId = "3rdPartialDiv"}))
          <fieldset>
          <ol>
            <li></li>
            <li>
             <input type="submit" value="Search" id="btnSearch"/>
            </li>
          </ol>
          </fieldset>
        </td>
       </tr>
      </table>
  </div>
</section>

控制器：

public ActionResult Search(model)
{
   //fill searchresults

   return PartialView("_3rdPartial", searchresults);
}

Answer 1

Html.BeginForm 将执行整页发布。我相信你所追求的是 Ajax.BeginForm。

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.beginform(v=vs.118).aspx

例子：

    @using (Ajax.BeginForm("TheActionResultYouWantToInvokeThatWillReturnTheThirdView", "YourController", null, new AjaxOptions { UpdateTargetId = "theIdOfTheDivForTheThirdView", OnSuccess = "doFunctionIfYouNeedTo", OnFailure = "ShowPopUpErrorIfYouWant" }))
     {

     }

邮政编码添加编辑：

此标记无效，可能是 UpdateTargetId 找不到 Div 的原因。

<section>
      <div id="searchpanel">
          @html.Partial("_1stPartial")
          <div id="2ndPartialDiv"></div>
          <div id="3rdPartialDiv"></div>
      </div>
 </section>

查看属性的结束语音标记。

Answer 2

我从您的问题中了解到的是，您正在从第一个 PartialView 提交，如果成功，您将显示第二个。这个也一样。如果从第二个PartialView 成功创建了POST，则您要显示第三个。

为什么不从客户端使用Ajax？

 $.ajax ({
   type:'POST'
   data: {},
   success: function(response){
       $('.specific_div_container_for_previous_partial').hide();
       $('.specific_div_container_for_partial').html(response.Html);
       $('.specific_div_container_for_partial').show();
   },
   error: function(){
       // whatever
   }
 });

在服务器端，您将使用PartialView 返回呈现的 html。要在variable 中渲染PartialView 并将其作为json 对象发送到客户端，请查看THIS

更新 - 如何在 jquery 中序列化表单：

请关注THIS