MVC4 Update Partial view

Question

I am developing a simple MVC application.

I have main view, partial view and controller.

This is my main View

@model partitalViewTest.Models.Qset 
@{

}

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Question</title>
    </head>
    <body>



    <div class="transbox" style="height:inherit;"> 
       @Html.Partial("CheckAnswer",Model.partialModel)
    </div> 

    </body>
</html>

This is my Partial View :

@model IEnumerable<partitalViewTest.Models.Qset>

@{
    Layout = null;   
}

<h2> </h2>
@foreach (var item in Model)
{
    @item.currpos;
}

@* <input type="button" title="Delete" value="@item.qstuinList[item.currpos].AnsC ;" onclick="changeBtn(this); location.href='@Url.Action("CheckAnswer", "RazerQuestion", new { id = 'A' })    '" />*@
<input id="Button1" type="button" value="button" onclick="location.href='@Url.Action("CheckAnswer", "RazerQuestion", new { id = 'A' })    '" />

This is my controller :

 public ActionResult CheckAnswer()
 {
     // Some Code
     return PartialView(qustinb.partialModel);
 }

This is working fine but my question is Partial View returns without wrapping the main view.

Please help me to solve this problem.

can you show url(route) which is used to call action method? — Akhlesh, Jun 16 '14 at 03:57
it seems that u have kept semi-colon after style in: "div class=transbox"....just have a look at it... — Deep Shah, Jun 16 '14 at 04:37
Mukus and X - Developer I have removed all Div tags but problem remains same — user3685818, Jun 16 '14 at 04:43
which is the view : "CheckAnswer"...add names of the views please... — Deep Shah, Jun 16 '14 at 04:46

score 1 · Accepted Answer · answered Jun 16 '14 at 05:04

Your button click is doing this:

location.href='@Url.Action("CheckAnswer", "RazerQuestion", new { id = 'A' })    '"

which navigates the browser to the partial page.

I suspect what you want to happen is for the partial page content to be replaced with the updated content without refreshing the browser, or navigating away.

You can do with with JQuery.

First, give your an id:

<div id="content" class="transbox" style="height:inherit;"> 
   @Html.Partial("CheckAnswer",Model.partialModel)
</div>

Second, do something similar to the following in response to the button click (error checking removed):

function doWork(){
    $.get('@Url.Action("CheckAnswer", "RazerQuestion", new { id = 'A' }'), function (data) {
        $('#content').html(data);
    });
}

Finally, change the button to do this:

<input id="Button1" type="button" value="button" onclick="doWork()" />

This will now:

On click of the button...
Fire the doWork() function, which will...
Make the request to the CheckAnswer action, and then...
Take the content of the request, and replace the <div /> content with the result

score 0 · Answer 2 · answered Jun 16 '14 at 05:20

The button will load only partial view.Instead of button, You can use Ajax.ActionLink to update some empty div on the page with partial view as reponse.
Here is a demo.

@Ajax.ActionLink("Link Text", 

                 "CheckAnswer",

                 new { Id='A' },

                 new AjaxOptions
                     {    
                     UpdateTargetId="emptyDiv", 
                     InsertionMode = InsertionMode.Replace,
                     HttpMethod = "GET"

                 })

MVC4 Update Partial view

2 Answers2

Linked