Question

我在UI中有表数据。当我单击行中的“详细信息”链接时，我想在同一页面中的div中显示数据。当我点击任何行中的详细信息链接时，JQuery函数不会被触发。

以下是我的代码：

模型视图类：

public class ItemViewModel
{
     public Item item { get; set; }
     public IEnumerable<Item> items { get; set; }
}

UI代码：

@model Medhub.Models.ItemViewModel

@{
    ViewBag.Title = "View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>View</h2>

<p>
    @Html.ActionLink("Create New", "CreateEdit", new { controller = "Item" }, new { @class = "btn btn-primary" })
</p>
<table align="center" height="10%" width="90%">
    <tr>
        <td>
            <div id="Items">
                <table style="vertical-align:top; height:200px" width="100%">
                    <tr style="height:20px">
                        <th>
                            @Html.DisplayName("Name")
                        </th>
                        <th>
                            @Html.DisplayName("Description")
                        </th>
                        <th>
                            @Html.DisplayName("Item Type")
                        </th>
                    </tr>

                    @if (Model != null)
                    {
                        foreach (var item in Model.items)
                        {
                            <tr style="height:15px">
                                <td>
                                    @Html.HiddenFor(model => item.ItemId)
                                    @Html.DisplayFor(model => item.Name)
                                </td>
                                <td>
                                    @Html.DisplayFor(model => item.Description)
                                </td>
                                <td>
                                    @Html.DisplayFor(model => item.Type)
                                </td>
                                <td>
                                    @Html.ActionLink("Edit", "CreateEdit", new { id = item.ItemId }) |
                                    @Html.ActionLink("Details", "Item", new { id = item.ItemId }) |
                                    @Html.ActionLink("Delete", "Delete", new { id = item.ItemId })
                                </td>
                            </tr>
                        }
                    }
                </table>
            </div>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <div id="ItemDetails">
                @if (Model.item != null)
                {
                    Html.RenderPartial("Details", Model.item);
                }
            </div>
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(function () {
        $("div.Items a").click(function (e) {
            //e.preventDefault();
            var url = this.ref;
            $("#ItemDetails").load(url);
        });
    });
</script>

控制器代码：

List<Item> items = new List<Item>();
// GET: Item
public ActionResult Item(int id = 0)
{
      ItemViewModel itemVM = new ItemViewModel();
      itemVM.items = GetItems();
      if (id > 0)
      itemVM.item = itemVM.items.FirstOrDefault(u => u.ItemId == id);
      return View(itemVM);
}

任何线索？

Answer 1

首先，您正在等待名为Items的类的点击。这就是没有触发jquery代码的原因。你应该

$("div#Items a").click(function (e) {

其次，你需要检查attribut href，而不是ref。此外，防止默认需要在那里，否则你只需重新加载你的页面

e.preventDefault();
var url = this.href;

您不需要页面中的renderpartial，只需将其留空：

<div id="ItemDetails">
</div>

虽然你的逻辑类型有效，但是加载url的方式会导致整个页面被加载到ItemDetails部分。我建议您在控制器中为详细信息创建单独的方法：

    public ActionResult Details(int id) {
        Item item = GetItem(id);

        return View(item);
    }

    private Item GetItem(int id) {
        return new Item() { Details = "details here" };
    }

.NET MVC JQuery函数未在表行单击事件中被触发

1 个答案: