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>
}

当用户点击Read More时，我想加载一个获取当前模型对象的bootstrap模式并详细显示整个新闻数据。目前，readmore span使用的Html动作链接似乎不起作用。我想使用Ajax加载模式，但无法弄清楚如何这样做。

这是我拥有的bootstrap Modal：

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中为Modal Popup提供的Action方法：

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

        return PartialView("NewsModal", currentItem);
    }

Answer 1

您可以使用锚标记代替 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');

或者可以直接使用数据目标，

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

单击

1 个答案: