Below I have a view which upon a button click, a modal will pop up.

I am thinking it may be best for the future if I have this modal inside of a partial. That way I can re-use it on other pages. However, I am trying to figure out a way to make it work with how I have my MVC flow currently working.

Any pointers, tips or ideas on how I can refactor it to be a partial would be greatly appreciated. Below is my code.

Controller actions (1 for page load and one for the button click data):

      /// <summary>
    /// Calls API client GetJobRequestArchive() function to grab defaualt data for model.
    /// /// </summary>
    ///
    [HttpGet]
    public ActionResult JobPollerMonitor()
    {

        var model = new Dashboard.Web.Models.Tools.JobPollerMonitorResponseModel();          

        try
        {
            using (var client = new DashboardAPIClient())
            {
                var response = client.GetJobRequests();
                model.JobRequests = response.JobRequests;

            }
        }
        catch (Exception ex)
        {
            ExceptionHandling.LogException(ex);
            throw;
        }

        return View(model);
    }
    /// <summary>
    /// Calls API client GetJobRequestParemeters() function to 
    /// grab parameters data for selected Job.
    /// /// </summary>
    /// <param name="jobRequestId"></param>
    ///
    [HttpGet]
    public ActionResult JobPollerParameters(int jobRequestId)
    {
        var model = new Dashboard.Web.Models.Tools.JobPollerMonitorResponseModel();

        try
        {
            using (var client = new DashboardAPIClient())
            {
                var response = client.GetJobRequestParemeters(jobRequestId);
                model.JobRequestParameters = response.JobRequestParameters;


            }
        }
        catch (Exception ex)
        {
            ExceptionHandling.LogException(ex);
            throw;
        }

        return Json( model.JobRequestParameters, JsonRequestBehavior.AllowGet);
    }

View with modal:

            @model Dashboard.Web.Models.Tools.JobPollerMonitorResponseModel

            @{
                ViewBag.Title = "Job Request Monitor";
            }

            <h2>@ViewBag.Title</h2>

            <div class="list-group container" id="JobRequestMonitorTable">
                <div class="row list-group-item list-group-item-heading container divTableHeading">
                    <div class="col-md-4"> Job Code </div>
                    <div class="col-md-4"> Description </div>
                    <div class="col-md-2"> Schedule </div>
                    <div class="col-md-1"> Running </div>
                    <div class="col-md-1"></div>
                </div>
                @if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
                {
                    <div class="row list-group-item-danger">
                        <div class="col-md-1 text-center">@ViewBag.ErrorMessage</div>
                    </div>
                }
                @foreach (var item in Model.JobRequests)
                {
                    <div class="row list-group-item container">
                        <div class="hidden" data-id="@item.JobRequestId" id="requestId">@item.JobRequestId</div>
                        <div class="col-md-4">@item.JobCode</div>
                        <div class="col-md-4">@item.Description</div>
                        <div class="col-md-2">@item.Schedule</div>
                        @if (@item.IsRunning == true)
                        {
                            <div class="col-md-1" style="margin-left:25px;"><span class="glyphicon glyphicon-ok"></span></div>
                            <div class="col-md-1"></div>
                        }
                        else
                        {
                            <div class="col-md-1"></div>
                            <div class="col-md-1">
                                <button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn"></button>
                            </div>
                        }
                    </div>
                }
            </div>

            <div class="modal fade" id="paramsModal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header modal-header-primary">
                            <a class="btn btn-xs btn-primary pull-right" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove"></span></a>
                            <h4 class="modal-title" id="modalTitleText"></h4>
                        </div>
                        <div class="modal-body">
                            <div class="list-group">
                                <div class="row list-group-item list-group-item-heading container divTableHeading" style="width:inherit;">
                                    <div class="col-md-6 font-weight-bold"> Parameter: </div>
                                    <div class="col-md-6 font-weight-bold"> Value: </div>
                                </div>

                                <div class="row list-group-item container" style="width:inherit;">
                                    <div class="col-md-6 text-break" id="modalName"></div>
                                    <div class="col-md-6 text-break" id="modalMessage"></div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

Script:

        <script>

            $("button").click(function () {

                var col = $('#requestId');
                var jobRequestId = col.data("id");

                 $.ajax({
                    url: '@Url.Action("JobPollerParameters", "Tools")',
                     data: { "jobRequestId": jobRequestId},
                     success: function (results) {

                        $modal = $('#paramsModal');
                        $modal.modal("show");
                        console.log(results);

                        var name = JSON.stringify(results[0].Name);
                        var value = JSON.stringify(results[0].Value);

                        $('#modalName').text(name);
                        $('#modalMessage').text(value);
                    }
                });
            });

        </script>

Model:

   public class JobPollerMonitorResponseModel
{
    public List<BusinessLayer.Objects.JobRequest.JobRequest> JobRequests { get; set; }

    public List<BusinessLayer.Objects.JobRequest.JobRequestParameter> JobRequestParameters { get; set; }
}

Also, I would like to add that I have already made a partial page that contains nothing but the modal inside of it, let's call it _MyPartial.cshtml

Related posts

Recent Viewed