2013-04-12 84 views
1

我正在使用MVC4和實體框架來開發一個wep應用程序。在我的一個觀點中,我列出了所有具有細節的人員名單。在開始時,只顯示名字和姓氏,但是有一個鏈接可以顯示詳細信息,我想盡可能使其具有動態性。MVC 4異步調用一個動作

我的行動返回Json(object, 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> 

捆綁:

public class BundleConfig 
    { 
     // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 
     public static void RegisterBundles(BundleCollection bundles) 
     { 
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         "~/Scripts/jquery-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
         "~/Scripts/jquery-ui-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.unobtrusive*", 
         "~/Scripts/jquery.validate*")); 

      // Use the development version of Modernizr to develop with and learn from. Then, when you're 
      // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
         "~/Scripts/modernizr-*")); 

      bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 

      bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
         "~/Content/themes/base/jquery.ui.core.css", 
         "~/Content/themes/base/jquery.ui.resizable.css", 
         "~/Content/themes/base/jquery.ui.selectable.css", 
         "~/Content/themes/base/jquery.ui.accordion.css", 
         "~/Content/themes/base/jquery.ui.autocomplete.css", 
         "~/Content/themes/base/jquery.ui.button.css", 
         "~/Content/themes/base/jquery.ui.dialog.css", 
         "~/Content/themes/base/jquery.ui.slider.css", 
         "~/Content/themes/base/jquery.ui.tabs.css", 
         "~/Content/themes/base/jquery.ui.datepicker.css", 
         "~/Content/themes/base/jquery.ui.progressbar.css", 
         "~/Content/themes/base/jquery.ui.theme.css")); 
     } 
    } 
+1

你可以使用jquery來創建一個ajax請求,然後從你的json結果中構建一些html並插入到頁面中。就個人而言,我會讓該操作返回一個局部視圖,然後jquery只會收到該html,並可以直接將其插入到頁面中。 –

回答

0

任何想法的傢伙?

是的,你可以使用AJAX鏈接:

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

,然後有一個佔位符,其中的細節將顯示:

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

終於有你的控制器動作返回部分而不是JSON:

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

and in相應的局部視圖,你可以有細節:

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

備註:如果您希望Ajax.ActionLink工作不要忘記在你的_layout的jquery.unobtrusive-ajax.js腳本。

+0

謝謝,我會試試看。 – Traffy

+0

感謝您的幫助,但它仍然無法正常工作。我跟着你做了什麼,我的ActionLink試圖將我重定向到另一個視圖(所以顯示了一個錯誤)。我在我的佈局中包含了正確的文件。 – Traffy

+0

確保你在**'jquery.unobtrusive-ajax.js'之前包含'jquery.js' **。另外,如果您使用的是ASP.NET MVC 4,那麼請謹慎使用它們,以避免使用相同腳本的多個內容。 –