1

I want to take a view and instead of opening a new page I want to just open that view inside a Jquery dialog. I was just wondering how it's done or if possible.

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>

As you can see I have a simple dialog that opens a div but I want to be able to open the details view instead of clicking the ActionLink and going to a different page, I want to be able to click the ActionLink and have it open up in the dialog.

4

1 回答 1

4

假设您使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 补充：

@{
  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
});

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

于 2012-11-17T03:16:19.040 回答