jquery - 使用 Ajax 渲染 MVC 视图

Question

我要完成的任务基本上涉及我使用 AJAX 调用 MVC 视图，并将视图的内容呈现到我的主要内容 div 中。我知道，由于我不会重新加载整个页面，只是刷新我需要的内容，我需要更改 URL 字符串以说明我尝试调用的任何控制器和操作，以获得所需的看法。到目前为止，我还没有做过很多 Ajax，因为我只是一名初级开发人员，但是我对学习如何实现诸如此类的事情以及随后的任何事情非常感兴趣。

我使用 C# 作为我的主要语言，并且可以使用 mvc3 或 mvc4，这是否有很大的不同，我不确定。

Answer 1

您可以为此使用 Ajax.ActionLink ...

@Ajax.ActionLink("Click here", "OtherAction", null, new AjaxOptions() { UpdateTargetId = "MyDiv" })

<div id="MyDiv">

</div>

行动

Public ActionResult OtherAction(long id)
{
    return View();
}

看法

@{
    ViewBag.Title = "Hello!";
    Layout = Request.IsAjaxRequest() ? null : "~/Views/Shared/_Layout.cshtml";
}

<h1>Hello!</h1>

Answer 2

Button: @supplierQuoteId is from the model via Razor.

<a id="@supplierQuoteId" class="t-button" style="float: right; margin: 3px; padding: 2px; line-height: 0;" 
    onclick="ajaxEditSupplierQuote(this.id)">
    <span class="t-icon t-edit">Edit</span>
</a>  

JavaScript: If $.ajax is complete, I open a Telerik Window and there is a .Content - div with the id="supplierquote-dialog-contet" which is then filled with the returned PartialView from the Controller, otherwise, i set .html(" ") . Empty.

<script type="text/javascript">        
    function ajaxEditSupplierQuote(id) {
        var strUrl = "/SupplierQuote/Edit" + "/" + id.toString();
        $.ajax({
            type: "GET",
            url: strUrl,
            dataType: "html",
            success: function (data) {
                if (!data) {
                    $('#supplierquote-dialog-content').html(" "); // error check
                }
                else {
                    $('#supplierquote-dialog-content').html(data);
                }
            },
            complete: function () {
                var window = $("#SupplierQuoteDialog").data("tWindow");
                window.center().open();
            }
        });
    }
</script>

SupplierQuoteController:

    [HttpGet]
    public ActionResult Edit(Guid id)
    {
        SupplierQuoteEntity supplierQuote = _supplierQuoteRepository.GetById(id);
        return PartialView("Edit", supplierQuote);
    }

Answer 3

看看这个问题，和你的很相似。

ASP.NET MVC - 将 PartialView 与另一个对象一起返回给 Ajax

从那里窃取一些代码，您可以执行以下操作：

public ActionResult GetSomePartialView(SomeArgumentModel someArguments)
{
    ReturnArgs r = new ReturnArgs();

    r.ViewString = this.RenderViewToString("SomeView");

    return Json(r);
}

public class ReturnArgs
{
    public ReturnArgs()
    {
    }

    public string ViewString { get; set; }
}

然后在视图中：

$.ajax({
    type: "GET",
    url: "/Home/GetSomePartialView/",
    data: someArguments,
    success: function (jsReturnArgs) { 

    $("#someDiv").html(jsReturnArgs.ViewString); //the HTML I returned from the controller
    },
    error: function (errorData) { onError(errorData); }
});