MVC部分视图在帖子后呈现为视图

时间:2016-03-08 10:07:52

标签: c# html asp.net-mvc asp.net-mvc-4 razor

美好的一天 我有一个索引页面,在2个选项卡上显示2个部分视图。每个选项卡上都有一个提交按钮,当单击提交按钮然后它命中控制器并且控制器执行一些处理并返回该部分视图的填充模型,但是部分视图将自己呈现为视图。

Index.chtml页面

...
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="float:left">
    <div >
        <ul id="myTab" class="nav nav-tabs nav-stacked">
            <li class="active">
                <a href="#IdentifyPerson" data-toggle="tab" class=""><strong>Identify Person</strong></a>
            </li>
            <li>
                <a href="#PersonInformation" data-toggle="tab" class=""><strong>Person Information</strong></a>
            </li>
        </ul>
    </div>
</div>

<div class="tab-content col-lg-9 col-md-9 col-sm-9 col-xs-9">
    <div id="IdentifyPerson" class="tab-pane fade in active">
        @Html.Partial("IdentifyPerson")
    </div>
    <div id="PersonInformation" class="tab-pane fade">
        @Html.Partial("PersonInformation")
    </div>
</div>

HomeCntroller.cs页面

[AuthorizeUser]
   public ActionResult Index(string ActionValue)
   {
       return View();
   }

   [HttpGet]
   [AuthorizeUser]
   public ActionResult IdentifyPerson()
   {
       return View();
   }

   [HttpPost]
   [AuthorizeUser]
   public ActionResult IdentifyPerson(ViewModel_IdentifyPerson model)
   {
       // do populate model
       return View(model);
   }

有关解决这个问题的任何建议吗?

识别个人页面 Identify Person

人员信息页面 Person Information here

2 个答案:

答案 0 :(得分:1)

您可能正在使用表单而不是 ajax表单。所以你需要使用ajax表单来保持同一页面。

IdentifyPerson 标签

@using (Ajax.BeginForm("IdentifyPerson", "Home", null, new AjaxOptions { UpdateTargetId = "IdentifyPerson" , InsertionMode= InsertionMode.Replace}))
{
    //Other stuff
    <input type="submit" value="Save" />
}

PersonInformation 标签

@using (Ajax.BeginForm("IdentifyPerson", "Home", null, new AjaxOptions { UpdateTargetId = "PersonInformation", InsertionMode = InsertionMode.Replace }))
{
    //Other stuff
    <input type="submit" value="Save" />
}

您需要包含此Js文件 您的观点<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 并将您的退货类型PartialView更改为实际操作

[HttpPost]
    [AuthorizeUser]
    public ActionResult IdentifyPerson(ViewModel_IdentifyPerson model)
    {
        // do populate model
        return PartialView(model);
    }

答案 1 :(得分:0)

如果您使用bootstrap,您只需将您的表单包装在Bootstrap模式窗口中作为部分视图