单击时将模型数据传递给引导模式

Question

我对 MVC 非常陌生，我不知道如何进行这项工作-

我有一个模型可以根据类别存储不同的新闻项目：

NewsModel.cs：

public class NewsModel
{
    public int ID { get; set; }
    public string category { get; set; }
    public String headline { get; set; }
    public string source { get; set; }
    public DateTime date { get; set; }
    public string body { get; set; }
    public string summary { get; set; }
}

我有一个将每个新闻项目显示为列表项目的视图：

Sports.cshtml：

    @model IEnumerable<Test.Models.NewsModel>

@foreach (var item in Model)
{
    <div class="news_target-left floatleft">
        <div class="image-container">
            <img src="~/Content/Images/demo_img.png" alt="website template image">
            <div class="top-left-text">
                @item.category
            </div>
        </div>

        <h3>@item.headline</h3>
        <p> @item.summary </p>
        <p class="single_cat_left_content_meta"><span>@item.source</span> |  @item.date</p>
        <span class="readmore">@Html.ActionLink("Read More", "NewsModal", "Home",  @item)</span> 
        </div>
}

当用户点击阅读更多时，我想加载一个获取当前模型对象并详细显示整个新闻数据的引导模式。目前，readmore 跨度使用似乎不起作用的 Html 操作链接。我想使用 Ajax 加载模式，但不知道该怎么做。

这是我拥有的引导模式：

NewsModal.cshtml：

@model Test.Models.NewsModel

<div id="newsModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Leadsquared Express</h4>
            </div>
            <div class="modal-body">
                <h2>@Model.headline</h2>
                <i><small>@Model.source</small></i>
                <p>@Model.body</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

模型在 Models/NewsModel 运动视图位于视图/类别/ 运动控制器动作在控制器/类别：运动 NewsModal 当前位于 Views/Categories/ 中。我曾尝试将此视图放入 Shared 以及它自己的文件夹中，但显然我做错了什么。

有什么帮助吗？

编辑： 我使用此链接进行了以下更改，但单击“阅读更多”不会打开模式弹出窗口。 http://www.c-sharpcorner.com/UploadFile/092589/implementing-modal-pop-up-in-mvc-application/

将 Sports.cshtml 中的 <span class="readmore">@Html.ActionLink("Read More", "NewsModal", "Home", @item)</span> 更改为

<a id="openmodal "href="javascript:void(0)" class="readmore" data-model="@Json.Encode(@item)">Read More</a> 

并添加了这个脚本：

$(document).ready(function () {
    var url = "/Home/NewsModal";
    var model = $("#openmodal").attr("data-model");
    alert("script running- sports.html");
    $.ajax({
        type: 'GET',
        url: '/Home/NewsModal',
        data: model,
        contentType: 'application/json; charset=utf-8',
        success: function (data, status, settings) {
            $("#openmodal").html(data);
        },
        error: function (ajaxrequest, ajaxOptions, thrownError) {

            $("#openmodal").html('Failed to load more content');
        }

    });

});

此外，这是我在 HomeController 中用于模态弹出窗口的操作方法：

public ActionResult NewsModal(NewsModel tempData)
    {
        NewsModel currentItem = new NewsModel();
        currentItem = tempData;

        return PartialView("NewsModal", currentItem);
    }

Answer 1

您可以通过使用 Anchor 标签 而不是 ActionLink 来制作点击事件， 并且你可以这样做。

<a href="" onclick="openModal()">Open a Modal by jQuery</a>

function openModal()
{
   $('#newsModal').modal('show');
}

 // $('#newsModal').modal('toggle');
 // $('#newsModal').modal('show');
 // $('#newsModal').modal('hide');

OR 可以直接用data-target，

<button type="button" data-toggle="modal" data-target="#newsModal">Launch modal</button>