我正在尝试学习unobtrusive-ajax
,因此我不必重新加载整个页面,只需要使用PartialView
重新加载表格的内容。
PartialView
可能不会加载到表格中。这是我的路由问题吗?
带表格的网址:
http://localhost:50459/
URL
http://localhost:50459/Product/GetProductData
RouteConfig
:
using System.Web.Mvc;
using System.Web.Routing;
namespace MVCUnobtrusiveAjax
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Product", action = "GetProducts", id = UrlParameter.Optional }
);
}
}
}
cshtml
:
@using MVCUnobtrusiveAjax.Models;
@model string
@{
ViewBag.Title = "Get Products";
AjaxOptions ajaxOptions = new AjaxOptions
{
UpdateTargetId = "productsTable"
};
}
<h2>Get Products</h2>
<div id="loadingProducts" style="background-color:cadetblue; display:none">
<p>Loading Products...</p>
</div>
<table style="background-color:lightcoral">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
<tbody id="productsTable">
@Html.Action("GetProductData", new { selectedCategory = Model })
</tbody>
</table>
@using (Ajax.BeginForm("GetProductData", ajaxOptions))
{
<div>
@Html.DropDownList("selectedCategory", new SelectList(
new[] { "All" }.Concat(Enum.GetNames(typeof(Category)))
))
<button type="submit">Submit</button>
</div>
}
PartialView
@using MVCUnobtrusiveAjax.Models
@model IEnumerable<Product>
@foreach (Product p in Model)
{
<tr>
<td>@p.ProductId</td>
<td>@p.Name</td>
<td>@p.Description</td>
<td>@p.Category</td>
<td>@p.Price</td>
</tr>
}
ProductController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MVCUnobtrusiveAjax.Models;
namespace MVCUnobtrusiveAjax.Controllers
{
public class ProductController : Controller
{
//
// GET: /Product/
public PartialViewResult GetProductData(string selectedCategory = "All")
{
IEnumerable<Product> data = products;
if (selectedCategory != "All")
{
Category selected = (Category)Enum.Parse(typeof(Category), selectedCategory);
data = products.Where(p => p.Category == selected);
}
return PartialView(data);
}
public ActionResult GetProducts(string selectedCategory = "All")
{
return View((object) selectedCategory);
}
private Product[] products = {
new Product {
ProductId = 1, Name = "Audi A3",
Description = "New Audi A3", Category = Category.Car,
Price = 25000
},
new Product {
ProductId = 2, Name = "VW Golf",
Description = "New VW Golf", Category = Category.Car,
Price = 22000
},
new Product {
ProductId = 3, Name = "Boing 747",
Description = "The new Boing airplane", Category = Category.Airplane,
Price = 2000000
},
new Product {
ProductId = 4, Name = "Boing 747",
Description = "The new Boing airplane", Category = Category.Airplane,
Price = 2000000
},
new Product {
ProductId = 5, Name = "Yamaha 250",
Description = "Yamaha's new motorcycle", Category = Category.Motorcycle,
Price = 5000
},
new Product {
ProductId = 6, Name = "honda 750",
Description = "Honda's new motorcycle", Category = Category.Motorcycle,
Price = 7000
}
};
}
}
答案 0 :(得分:1)
让您引用正确的js文件。对于不引人注目的,它将是:
jquery.unobtrusive-ajax.min.js