1

ビューを取得したいのですが、新しいページを開く代わりに、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();
        }
    }
}

インデックス.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 をクリックして開くことができるようにしたいと考えています。ダイアログで。

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補足をレンダリングするためにWebサイトで一般的な場所である場合は、同じことを行うようにファイルを調整することもできます。

@{
  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 に答える