Home Passing Model Data to a Bootstrap Modal on click
Reply: 0

Passing Model Data to a Bootstrap Modal on click

user4460
1#
user4460 Published in May 23, 2018, 8:14 pm

I'm extremely new to MVC and I don't know how to make this work-

I have a model that stores different news items based on categories:

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

I have a View that displays each of the news items as a list Item:

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

When the user clicks on Read More, I want to load a bootstrap modal that gets the current model object and displays the entire news data in detail. Currently, the readmore span uses an Html actionlink that does not seem to be working. I want to load the modal using Ajax but cannot figure out how to do so.

This is the bootstrap Modal that I have:

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>

The Model is in Models/NewsModel The Sports View is in Views/Categories/ The Sports controller Action is in Controllers/Categories:Sports The NewsModal is currently in Views/Categories/. I have tried putting this view in Shared, as well as its own folder, but I'm obviously doing something wrong.

Any help?

Edit: I used this link to make the following changes but clicking on "Read more" does not open the modal popup. http://www.c-sharpcorner.com/UploadFile/092589/implementing-modal-pop-up-in-mvc-application/

changed <span class="readmore">@Html.ActionLink("Read More", "NewsModal", "Home", @item)</span> in Sports.cshtml to

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

and added this script:

$(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');
        }

    });

});

Additionally, this is the Action Method I have for the Modal Popup, in HomeController:

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

        return PartialView("NewsModal", currentItem);
    }
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.307395 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO