MVC4 Update Partial view

问题

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.

回答1:

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

回答2:

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"

                 })

来源：https://stackoverflow.com/questions/24236419/mvc4-update-partial-view

标签

.net

asp.net-mvc

asp.net-mvc-4

web

partial