C# MVC4异步调用操作_C#_Jquery_Ajax_Asp.net Mvc

C# MVC4异步调用操作

c# jquery ajax asp.net-mvc

C# MVC4异步调用操作,c#,jquery,ajax,asp.net-mvc,C#,Jquery,Ajax,Asp.net Mvc,我正在使用MVC4和实体框架开发wep应用程序。在我的一个观点中，我有一份名单，上面列出了所有人的详细情况。在开始时，只显示名字和姓氏，但有一个链接可用于显示详细信息，我希望使其尽可能动态我的操作返回一个Json（对象，JsonRequestBehavior.AllowGet）有什么想法吗，伙计们编辑：我的行动 public ActionResult ListByOwner(long id) { var productallocations = db

我正在使用MVC4和实体框架开发wep应用程序。在我的一个观点中，我有一份名单，上面列出了所有人的详细情况。在开始时，只显示名字和姓氏，但有一个链接可用于显示详细信息，我希望使其尽可能动态

我的操作返回一个

Json（对象，JsonRequestBehavior.AllowGet）

有什么想法吗，伙计们

编辑：我的行动

        public ActionResult ListByOwner(long id)
    {
        var productallocations = db.ProductAllocations.Where(obj => obj.Id_Person == id).Include("Product");
        return PartialView(productallocations);
    }

我的看法是：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/bootstrap")
        @Scripts.Render("~/bundles/modernizr")
        <script src="../../Scripts/globalize.js" type="text/javascript"></script>
        <script src="../../Scripts/globalize.culture.fr-FR.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
            <div class="container-fluid">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="brand" href="@Url.Action("Index", "Home")">BuSI Material Manager</a>
                <div class="nav-collapse collapse">
                <p class="navbar-text pull-right">
                    Logged in as @User.Identity.Name
                </p>
                <ul class="nav">
                    <li>@Html.ActionLink("Home","Index","Home")</li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Persons <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li>@Html.ActionLink("All persons list","Index","Person")</li>
                          <li>@Html.ActionLink("All allocations list", "Index", "ProductAllocation")</li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cards<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li>@Html.ActionLink("All phone cards list", "Index", "PhoneCard")</li>
                          <li>@Html.ActionLink("All fuel cards list", "Index", "VehicleFuelCard")</li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li>@Html.ActionLink("All products list", "Index", "Product")</li>
                          <li>@Html.ActionLink("Products in stock", "ProductStock", "Product")</li>
                          <li>@Html.ActionLink("Allocated products", "AllocatedProducts", "Product")</li>
                          <li class="divider"></li>
                          <li>@Html.ActionLink("Product types", "Index", "ProductType")</li>
                          <li>@Html.ActionLink("Product companies", "Index", "ProductCompany")</li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Vehicles <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li>@Html.ActionLink("All vehicles list", "Index", "Vehicle")</li>
                          <li>@Html.ActionLink("Available vehicles", "AvailableVehicles", "Vehicle")</li>
                          <li>@Html.ActionLink("Allocated vehicles", "AllocatedVehicles", "Vehicle")</li>
                          <li class="divider"></li>
                          <li>@Html.ActionLink("Vehicle types", "Index", "VehicleType")</li>
                          <li>@Html.ActionLink("Vehicle motor types", "Index", "VehicleMotorType")</li>
                          <li class="divider"></li>
                          <li><a href="@Url.Action("Index", "VehicleInsuranceContract")">Insurance contracts</a></li>
                          <li><a href="@Url.Action("Index", "VehicleLeasingContract")">Leasing contracts</a></li>
                        </ul>
                    </li>
                </ul>
                </div>
            </div>
            </div>
        </div>

        <div id="body">
            @RenderSection("featured", required: false)
            @RenderBody()
        </div>

        <footer>
            <p>Developed by me.</p>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
        <script src="../../Scripts/Utils.js" type ="text/javascript"></script>
    </body>

</html>

有什么想法吗，伙计们

是的，您可以使用AJAX链接：

@Ajax.ActionLink(
    "Details", 
    "Details", 
    new { id = person.Id }, 
    new AjaxOptions { UpdateTargetId = "details" }
)

然后有一个显示详细信息的占位符：

<div id="details"></div>

在相应的局部视图中，您可以看到以下详细信息：

@model Person
<div>
    @Html.DisplayFor(x => x.FirstName)
</div>
<div>
    @Html.DisplayFor(x => x.LastName)
</div>
<div>
    @Html.DisplayFor(x => x.Age)
</div>
...

@模特儿
@DisplayFor（x=>x.FirstName）
@DisplayFor（x=>x.LastName）
@DisplayFor（x=>x.Age）
...

备注：如果您希望

ajax.ActionLink

正常工作，请不要忘记在您的布局中包含

jquery.unobtrusive ajax.js

脚本。

您可以使用jquery发出ajax请求，然后根据操作的json结果构建一些html并将其插入页面。就我个人而言，我会让操作返回一个部分视图，然后jquery将只接收html并直接将其插入页面。谢谢您的帮助，但它仍然不起作用。我遵循了您所做的操作，我的ActionLink尝试将我重定向到其他视图（因此显示了一个错误）。我在布局中包含了正确的文件。请确保在

jquery.unobtrusive ajax.js

之前包含了

jquery.js

。另外，如果您使用ASP.NET MVC 4，请小心使用捆绑包，如果您使用捆绑包，请避免包含多个相同的脚本。我已经更新了代码：我认为捆绑包没有问题。我应该在jquery.js之后在正文中包含我的ajax.js吗？你应该首先使用

jquery.js

，然后使用

jquery.unobtrusive ajax.js

。如果您是说，当您单击Ajax.ActionLink时，您不会得到Ajax调用，而是浏览器重定向，那么您肯定会遇到脚本问题。谢谢。我是否应该发布我的bundles配置以便您查看？

public ActionResult Details(int id)
{
    var model = repository.Get(id);
    return PartialView(model);
}

@model Person
<div>
    @Html.DisplayFor(x => x.FirstName)
</div>
<div>
    @Html.DisplayFor(x => x.LastName)
</div>
<div>
    @Html.DisplayFor(x => x.Age)
</div>
...