Save Bootstrap Modal popup data in database in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted 2 months ago

Hi,

I want to create a modal using javascript in mvc. I tried but mine doesn't work.

when I tried manually put the data, the data from modal is not save in database.

This my View look like

 
            <tbody>
                @foreach (var item in ViewBag.updateList)
                {
                    <tr>                       
                        <td>@item.ST</td>
                        <td>                      
                            <a href="" class="btn btn-warning" data-toggle="modal" data-target="#myModal"  data-status="@item.ST">EQM</a>
                        </td>
                    </tr>
                }
            </tbody>

My modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            @using (Html.BeginForm("eqm", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
            {
                <div class="modal-header">
                    <h5 class="modal-title custom_align">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input class="form-control " id="ST" name="ST" type="text" value="">
                    </div>
                    <div class="form-group">
                        @Html.TextBoxFor(model => model.ST_status, new { @class = "form-control", list = "browsers" })

                        <datalist id="browsers">
                            <option value="Pass">
                            <option value="Fail">
                        </datalist>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
                Html.EndForm();
            }
        </div>
    </div>
</div>

 Javascript for Modal

<script>
    $('#myModal').on('show.bs.modal', function (e) {
        var button = $(e.relatedTarget) // Button that triggered the modal
        var ST = button.data('status') // Extract info from data-* attributes
        $(e.currentTarget).find('.modal-title').text('Change Status for Service Tag :' + ST);
        $(e.currentTarget).find("input[name='ST']").val(ST);
    })
</script>

 My controller to save data in database

        [HttpGet]
        public ActionResult eqm()
        {
            var statusList = new SelectList(new[] { "Pass", "Fail" });
            ViewBag.statusList = statusList;

            return View();
        }

        [HttpPost]
        public ActionResult eqm(FormReportModel statusIn)
        {
            var statusList = new SelectList(new[] { "Pass", "Fail" });
            ViewBag.statusList = statusList;
            if (statusIn != null)
            {
                var updateStatus = db.orders
                .Where(a => a.ST == statusIn.ST).FirstOrDefault();

                updateStatus.ST_status = statusIn.ST_status.ToString();
                db.SaveChanges();
            }

            return RedirectToAction("Index");
        }

 Model FormReportModel.cs

    public class FormReportModel
    {
        public string order_id { get; set; }

        public string status_name { get; set; }
        public int status_id { get; set; }

        public string ST { get; set; }
        public string ST_status { get; set; }
    }
This question does not have replies that have been liked.