CODEWITHSUNDEEP
c#htmlasp.net-mvcasp.net-mvc-4razor
ArnoDT
ArnoDT

Reputation: 105

MVC Partial View render as a view after a post

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.

Index.chtml page

...
<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

[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 Identify Person

Person Information page Person Information here

Upvotes: 2

Views: 7514

Answers (2)

joint_ops
joint_ops

Reputation: 322

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

Upvotes: 0

Amit Kumar
Amit Kumar

Reputation: 5962

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

In IdentifyPerson tab

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

and In PersonInformation tab

@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

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

Upvotes: 1

Related Questions