加载partialview会使用unobtrusive-ajax更改URL路由

时间:2014-06-05 15:46:23

标签: asp.net-mvc asp.net-mvc-3 asp.net-mvc-4

我正在尝试学习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
                                         }

                                     };
    }
}

1 个答案:

答案 0 :(得分:1)

让您引用正确的js文件。对于不引人注目的,它将是:

jquery.unobtrusive-ajax.min.js