MVC部分视图呈现为post后的视图

时间:2022-10-08 13:51:15

Good day I have an Index page that display 2 partialviews on 2 tabs. Each tab has a submit button on it, when the submit button is clicked then it hits the controller and the controller does some process and return a populated model for that partialview, but the partialview is renderd as a view on its own.

您好,我有一个索引页面,在两个选项卡上显示两个部分视图。每个选项卡上都有一个submit按钮,当submit按钮被单击时,它会点击控制器,控制器会进行一些处理,并为这个partialview返回一个填充的模型,但是partialview是作为一个视图呈现的。

Index.chtml page

索引。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 page

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);
   }

any advice on fixing this?

有什么建议吗?

Identify Person page MVC部分视图呈现为post后的视图

识别人的页面

Person Information page MVC部分视图呈现为post后的视图

个人信息页面

2 个解决方案

#1


1  

you may be using Form rather than ajax form. so you need to use ajax form to stay on same page.

您可能使用表单而不是ajax表单。因此,您需要使用ajax表单来保持相同的页面。

In IdentifyPerson tab

在IdentifyPerson选项卡

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

and In PersonInformation tab

而在PersonInformation选项卡

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

you need to include this Js file <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> on your view and also change your return type PartialView to in action

您需要包含这个Js文件

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

#2


0  

If You using bootstrap,You can simply wrap Your Form in Bootstrap modal window as a partial view

如果您使用bootstrap,您可以简单地将表单包装在bootstrap模式窗口中,作为部分视图

#1


1  

you may be using Form rather than ajax form. so you need to use ajax form to stay on same page.

您可能使用表单而不是ajax表单。因此,您需要使用ajax表单来保持相同的页面。

In IdentifyPerson tab

在IdentifyPerson选项卡

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

and In PersonInformation tab

而在PersonInformation选项卡

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

you need to include this Js file <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> on your view and also change your return type PartialView to in action

您需要包含这个Js文件

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

#2


0  

If You using bootstrap,You can simply wrap Your Form in Bootstrap modal window as a partial view

如果您使用bootstrap,您可以简单地将表单包装在bootstrap模式窗口中,作为部分视图