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

按钮： @supplierQuoteId来自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的：如果$ .ajax完成，我打开一个Telerik窗口，然后有一个.Content - div，id =“supplierquote-dialog-contet”，然后用Controller返回的PartialView填充，否则，我设置.html（ “”）。空。

<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 - Returning a PartialView to Ajax along with another object

从那里窃取一些代码你可以做这样的事情：

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); }
});

使用Ajax渲染MVC视图

3 个答案: