Question

我想要一个视图，而不是打开一个新页面，我想在Jquery对话框中打开该视图。我只是想知道它是如何完成的，或者如果可能的话。

HomeController.cs

      using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Jquery_Dialog.Models;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

namespace Jquery_Dialog.Controllers
{
    public class HomeController : Controller
    {
        private IEnumerable<Product> Products
        {
            get
            {
                return new List<Product>
                {
                  new Product {ProductID = 1, Name = "Train", Category = "Toy", Price = 29.99M},
                  new Product {ProductID = 2, Name = "Truck", Category = "Toy", Price = 19.99M},
                  new Product {ProductID = 3, Name = "Bread", Category = "Food", Price = 2.49M},
                  new Product {ProductID = 4, Name = "Cookies", Category = "Food", Price = 2.99M}
                };
            }
        }

        public ActionResult Index()
        {

            IEnumerable<Product> productList = Products;
            return View(productList);
        }

        public ActionResult Details(int id)
        {
            Product model = Products.Where(p => p.ProductID == id).SingleOrDefault();
            return Request.IsAjaxRequest() ? PartialView(model) : PartialView(model);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Index.cshtml

@model IEnumerable<Jquery_Dialog.Models.Product>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css " />
<script src="http://code.jquery.com/jquery-1.8.2.js "></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js "></script>


<table> @foreach (var item in Model) {
<tr>
  <td>
  @Html.ActionLink(item.Name, "Details", new { id = item.ProductID }, new { @class = "ajax-details" })
  </td>
</tr>
}
</table>

<div id="dialog" title="Title of dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<script>
    $(function () {
        $('.ajax-details').on('click', function (e) { // bind to click event
            // go get the page using the link's `href`
            $.get($(this).prop('href'), function (response) {
                $(response).dialog(); // take the response and throw it up in a dialog
                // optional: Use jQuery UI's options to specify buttons and other
                //           settings here as well. It's also probably a good idea to
                //           bind the close event and $().remove() this element from
                //           the page on close since the user can click links over and
                //           over. (prevent DOM overload of hidden elements)
            });
            e.preventDefault(); // don't let it continue on
        });
    });
</script>


<script>
        $("#dialog").dialog();
</script>

正如您所看到的，我有一个打开div的简单对话框，但我希望能够打开详细信息视图而不是单击ActionLink并转到其他页面，我希望能够单击ActionLink并且它在对话框中打开。

Answer 1

假设您使ActionLink更容易访问（例如使用类名）：

@Html.ActionLink(item.Name, "Details", new { id = item.ProductID },
  /* htmlAttributes: */ new { @class = "ajax-details" })

您还对操作进行了修改，以便我们可以在获取ajax请求时获取部分内容：

public ActionResult Details(int id)
{
  // this is another way of making sure that AJAX calls get partial content,
  // but a normal visit would render the entire page.
  return Request.IsAjaxRequest() ? PartialView(model) : View(model);
}

可选您还可以调整_ViewStart.cshtml文件以执行相同操作，如果这是网站上的常见位置，以呈现部分视图/ ajax补充： < / p>

@{
  Layout = IsAjax ? null : "~/Views/Shared/_Layout.cshtml";
}

现在，我们用AJAX连接它。再次，引用我们之前游戏链接的类名（ajax-details）：

$('.ajax-details').on('click',function(e){ // bind to click event
  // go get the page using the link's `href`
  $.get($(this).prop('href'), function(response){
    $(response).dialog(); // take the response and throw it up in a dialog
    // optional: Use jQuery UI's options to specify buttons and other
    //           settings here as well. It's also probably a good idea to
    //           bind the close event and $().remove() this element from
    //           the page on close since the user can click links over and
    //           over. (prevent DOM overload of hidden elements)
  });
  e.preventDefault(); // don't let it continue on
});

没有机会对它进行测试，但应该让你进入球场。如果它不能让你足够接近，请告诉我，我会重新回答并调整。

在jquery对话框中打开MVC4视图

1 个答案: