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

Last Reply 6 days ago By dharmendr

Posted 15 days 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; }
    }
Posted 6 days ago

Hi nabilabolo,

Check this example. Now please take its reference and correct your code.

SQL

CREATE TABLE orders(order_id int primary key identity,status_name VARCHAR(10),status_id INT,ST VARCHAR(10),ST_status VARCHAR(10))
INSERT INTO orders VALUES('Status 1',1,'ST 1','')
INSERT INTO orders VALUES('Status 2',2,'ST 2','')
INSERT INTO orders VALUES('Status 3',3,'ST 3','')

Model

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

Controller

public class HomeController : Controller
{
    // GET: /Home/
    MasterEntities db = new MasterEntities();
    public ActionResult Index()
    {

        List<FormReportModel> updateList = db.orders.Select(x => new FormReportModel { ST = x.ST, ST_status = x.ST_status }).ToList();
        TempData["updateList"] = updateList;
        return View(new FormReportModel());
    }

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


    [HttpPost]
    public ActionResult eqm(FormReportModel statusIn)
    {
        var statusList = new SelectList(new[] { "Pass", "Fail" });
        TempData["statusList"] = statusList;

        if (statusIn != null)
        {
            var updateStatus = db.orders.Where(a => a.ST == statusIn.ST).FirstOrDefault();
            updateStatus.ST_status = statusIn.ST_status;
            db.SaveChanges();
        }

        return RedirectToAction("Index");
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Save_Modal_Popup_MVC.Models.FormReportModel>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('#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>
</head>
<body>
    <table class="table table-responsive" align="center">
        <tr>
            <th>St</th>
            <th>Status</th>
        </tr>
        <tbody>
            <%foreach (var item in (List<Save_Modal_Popup_MVC.Models.FormReportModel>)TempData["updateList"])
              {%>
            <tr>
                <td><%=item.ST%></td>
                <td><%=item.ST_status%></td>
                <td><a href="" class="btn btn-warning" data-toggle="modal" data-target="#myModal" data-status="<%=item.ST%>">EQM</a></td>
            </tr>
            <%}%>
        </tbody>
    </table>
    <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>
                <% } %>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot