PopUp 不在 ASP.NET MVC 5 和实体框架中的数据库中发送数据

Question

The popup code works just fine but after I add the credentials and click on the submit button to create the record nothing happens. I'm new to ASP.NET MVC 5 and Entity Framework 6. Any guidance will be most appreciated.

@model IEnumerable <LogInTest1.Models.Credentials> 
@{var createModel = new LogInTest1.Models.Credentials();} @* I think I didn't do this part right *@
@{
    ViewBag.Title = "Index";
}

Here is the button code:

<button class="btn btn-default" onclick="AddData()">Click to Create &raquo;</button>
<script>
    function AddData() {
        $("#MyModal").modal();
    }
</script>

Here is the popup code:

<div class="modal fade" id="MyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Add Data</h4>
                </div>
                <div class="modal-body">
                    @using (Html.BeginForm())
                    {

                        @Html.AntiForgeryToken()

                        <div class="form-horizontal">                       
                            <hr />
                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                            <div class="form-group">
                                @Html.LabelFor(model => createModel.userName, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => createModel.userName, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => createModel.userName, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => createModel.password, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => createModel.password, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => createModel.password, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Create" class="btn btn-default" />
                                </div>
                            </div>
                        </div>
                    }

                </div>
            </div>
        </div>
    </div>

Data get easily added in the create view:

<p>
    @Html.ActionLink("Create New", "Create")
</p>

Table code:

<table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.userName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.password)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.userName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.password)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.empId }) |
                    @Html.ActionLink("Details", "Details", new { id = item.empId }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.empId })
                </td>
            </tr>
        }

    </table>

Controller code:

using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;
using LogInTest1.Models;

namespace LogInTest1.Controllers
{
    public class CredentialsController : Controller
    {
        private CredentialsContext db = new CredentialsContext();

        // GET: Credentials
        public ActionResult Index()
        {
            return View(db.Cr.ToList());
        }

        // GET: Credentials/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Credentials credentials = db.Cr.Find(id);

            if (credentials == null)
            {
                return HttpNotFound();
            }

            return View(credentials);
        }

        // GET: Credentials/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Credentials/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "empId,userName,password")] Credentials credentials)
        {
            if (ModelState.IsValid)
            {
                db.Cr.Add(credentials);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(credentials);
        }

        // GET: Credentials/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Credentials credentials = db.Cr.Find(id);

            if (credentials == null)
            {
                return HttpNotFound();
            }

            return View(credentials);
        }

        // POST: Credentials/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "empId,userName,password")] Credentials credentials)
        {
            if (ModelState.IsValid)
            {
                db.Entry(credentials).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(credentials);
        }

        // GET: Credentials/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }

            Credentials credentials = db.Cr.Find(id);

            if (credentials == null)
            {
                return HttpNotFound();
            }

            return View(credentials);
        }

        // POST: Credentials/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Credentials credentials = db.Cr.Find(id);
            db.Cr.Remove(credentials);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

Answer 1

    paste this code into your index page <div class="modal fade" id="MyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Add Data</h4>
                </div>
                <div class="modal-body">
                    @{ Html.RenderPartial("~/Views/Credentials/Create.cshtml", new Credentials());}

                </div>
            </div>
        </div>
    </div>
    <button class="btn btn-default" onclick="AddData()">Click to Create &raquo;</button>
    <script>
        function AddData() {

            $("#MyModal").modal();

        }

    </script>

       And your Create page should like this
@model MvcWithDI.Models.Credentials

@using (Html.BeginForm("Create","Credentials",FormMethod.Post)) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Credentials</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.userName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.userName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.userName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}