Question

My Controller Action is:

        public ActionResult PVInPage()
        {
            return View();
        }

        public ActionResult ViewPage2()
        {
            return PartialView();
        }

My Main View:

@using (Html.BeginForm("ViewPage2", "PartialViewInPage"))
{    
    <input type="submit" value="Call Page Two" />  
}

<div id="DisplayPartilView">

        @*display partial view *@

</div>

My Partial view Is :

  @{
        ViewBag.Title = "View Page 2";
    }

    <div style="width:500px; height:200px; background-color:Gray" >


     <h1> This is my Partial view </h1>

    </div>

Now I want to do : when i click submit button in my main view then my partial view arise in

My main view inner div with id=”DisplayPartilView”.
Thanks for response

Answer 1

If you want to load data/html into a page without navigating to a different page you need to use Ajax.

ASP.Net MVC provides a set of helpers to work with Ajax (they are all use jQuery.Ajax under the hood so you can always drop back to one level and write your ajax calls by hand).

But in your case the Ajax.BeginForm provides everything what you need:

So change your main view to:

@using (Ajax.BeginForm("ViewPage2", "PartialViewInPage", 
        new AjaxOptions() { UpdateTargetId = "DisplayPartilView" }))
{    
    <input type="submit" value="Call Page Two" />  
}

<div id="DisplayPartilView">

        @*display partial view *@

</div>

And to make it work you need to reference the following script in your main view or in your layout file after jQuery:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>