【问题标题】:Failed to create new data into the database using the popup form无法使用弹出表单将新数据创建到数据库中
【发布时间】:2020-08-19 08:26:39
【问题描述】:

我试图创建一个弹出系统来在数据库中创建新数据。当我在我的索引视图中单击“创建”时,我会找到一个弹出表单。但是当我单击“保存”进行数据保存时,它不起作用。突然它开始工作并将数据保存到数据库中。但它只发生过一次。但我不明白为什么它工作不顺利。

这是我的代码:

型号

namespace Practise.Models
{
    public class Category
    {
        public int Id { get; set; }
        public string CategoryName { get; set; }
    }
}

控制器:

namespace Practise.Controllers
{
    public class CategoryController : Controller
    {
        private ApplicationDbContext _db;

        public CategoryController(ApplicationDbContext db) //input parameter
        {
            _db = db;
        }



        public IActionResult Index()
        {
            return View(_db.Category.ToList());
        }


        [HttpGet]

        public IActionResult Create()
        {

            Category ca = new Category();
            return PartialView("_CreatePartial", ca);
            //return View();
        }



        [HttpPost]
        public IActionResult Create(Category ca)
        {
            _db.Category.Add(ca);
            _db.SaveChanges();
            return PartialView("_CreatePartial", ca);

        }

    }
}

索引.cshtml

@model IEnumerable<Practise.Models.Category>

@{
    ViewData["Title"] = "Index";
}

<div id="PlaceHolderHere"></div>


<button type="button" class="btn btn-primary" data-toggle="ajax-model" data-target="#addEmployee" data-url="@Url.Action("Create")">Create</button>
</br></br>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CategoryName)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CategoryName)
                </td>
                <td>
                    <partial name="_ButtonPartial" model="@item.Id" />
                </td>
            </tr>
        }
    </tbody>
</table>
@section scripts{
    <script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>

    <script type="text/javascript">
        $(function(){
            var save = '@TempData["save"]'

            if (save!= null) {
                alertify.success(save);
            }

        })

    </script>

}

_CreatePartial 视图:



@model Category

<div class="modal fade" id="#addEmployee">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="#addEmployeeLabel">Add Category</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>x</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="Create">
                    <div class="form-group">
                        <label asp-for="CategoryName"> </label>
                        <input asp-for="CategoryName" class="form-control" />
                        <span asp-validation-for="CategoryName" class="text-danger"></span>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-save="modal">Save</button>
            </div>
        </div>
    </div>
</div>




JS(site.js)

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('button[data-toggle="ajax-model"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })
    PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {

        var form = $(this).parents('.modal').find('form'); 
          var actionUrl = form.attr('action');
          var sendData = form.serialize();
            $.post(actionUrl, sendData).done(function (data) {
            PlaceHolderElement.find('.modal').modal('hide');
        })
    })
})

我的输出:

当我按下保存按钮时,我希望它将数据保存到 DB。但它不起作用。

【问题讨论】:

  • 根据您的描述和代码,它在我这边运行良好。您能否告诉我类别的 ID 是否自动缩放?如果 id 不是自动缩放,这意味着它将始终使用相同的 id 0。
  • @BrandoZhang 我不明白“自动缩放”的含义。我会给你代码来检查这个。请告诉我我会给你什么代码来检查这个。
  • 对不起,我的意思是id已经在sql server中启用了身份。

标签: c# jquery ajax asp.net-core asp.net-core-mvc


【解决方案1】:

我必须改变类似的东西来保存数据:

  public IActionResult Create()
        {

            //Category ca = new Category();
            //return PartialView("_CreatePartial", ca);
            return View();
        }



        [HttpPost]
        public IActionResult Create(Category ca)
        {
            _db.Category.Add(ca);
            _db.SaveChanges();
            return RedirectToAction("Index");

        }

创建视图:

@model Practise.Models.Category
@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

    <div class="modal fade" id="#addEmployee">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="#addEmployeeLabel">Add Category</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form asp-action="Create" method="post">
                        <div class="form-group">
                            <label asp-for="CategoryName"> </label>
                            <input asp-for="CategoryName" class="form-control" />
                            <span asp-validation-for="CategoryName" class="text-danger"></span>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                            @*<button type="button" class="btn btn-primary" data-save="modal">Save</button>*@
                            <input type="submit" class="btn btn-primary" value="Submit"/>
                        </div>
                    </form>
                </div>
               

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



然后成功将保存数据。

【讨论】:

    猜你喜欢
    • 2019-04-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-29
    相关资源
    最近更新 更多