Блог

Я столкнулся с проблемой в своей ASP.NET Проект MVC.

Я создал проект с первым подходом к базе данных, но при попытке открыть страницу редактирования с помощью всплывающего диалогового окна диалоговое окно не отображалось.

Класс таблиц с использованием автоматически сгенерированного класса таблиц, созданного во время добавления модуля Entity Framework.

 namespace Ecommerce_EF_DB_18May21.Models
{
    using System;
    using System.Collections.Generic;
            
    public partial class Tbl_Category
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public Tbl_Category()
        {
            this.Tbl_Product = new HashSet<Tbl_Product>();
        }
            
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
        public bool IsActive { get; set; }
        public bool IsDelete { get; set; }
        public bool IsFeatured { get; set; }
        public string ImageURL { get; set; }
            
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Tbl_Product> Tbl_Product { get; set; }
    }
}
 

Это мои действия контроллера:

 [HttpGet]
public ActionResult EditP(int id)
{
    var category = categoryService.GetCategoryID(id);
    return PartialView(category);
}

[HttpPost]
public ActionResult EditP(Tbl_Category category)
{
    categoryService.updateCategory(category);
    return RedirectToAction("Index");
}
 

Кнопка редактирования для вызова всплывающего диалогового окна на странице индекса

 <div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <td>Category Name</td>
                    <td>Is Active</td>
                    <td>Is Featured</td>
                    <td>Actions</td>
                </tr>
            </thead>
    
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.CategoryName</td>
                        <td>@item.IsActive</td>
                        <td>@item.IsFeatured</td>
                        <td>
                            <button class="Btn_Edit" id="BtnEdit" data-id="@item.CategoryId" data-toggle="modal" data-target="#myModalEdit">Edit</button>
                    

        <button class="dltBtn" data-id="@item.CategoryId">Delete</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
 

This is the Edit page markup:

 @{
    ViewBag.Title = "EditP";

    var trueChecked = Model.IsFeatured ? "checked" : string.Empty;
    var falseChecked = !Model.IsFeatured ? "checked" : string.Empty;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<form id="EditCat">
<div class="container">
    <!-- The Modal -->
    <div class="modal fade" id="myModalEdit">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Edit Category</h4>
                <button type="button" class="close" data-dismiss="modal">amp;times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <input type="hidden" name="ID" value="@Model.CategoryId" />
                <div class="form-group">
                    <input type="text" value="@Model.CategoryName" class="form-control" id="txtName1" name="Name" placeholder="Enter Category" />
                </div>
                <br />
                <div class="form-group">
                    <label>Is Featured?</label>
                    <input name="IsFeatured" type="radio" value="True" @trueChecked /> True
                    <input name="IsFeatured" type="radio" value="False" @falseChecked /> False
                </div>
                <br />
                <label>Image</label>
                <input id="ImageURLEdit" name="ImageURL" type="hidden" />
                <input id="imageUploadEdit" name="Image" type="file" />
                <div class="thumb">
                    <img id="EditCatImage" style="height:150px; width:250px;" />

                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button id="UpdateBtn" type="button" class="btn btn-primary" data-dismiss="modal">Update</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>

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

Скрипт также прилагается

 <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script>
     //EditBtn Modal
     $("#UpdateBtn").click(function () {
         $.ajax({
             type: 'POST',
             url: '/Category/EditP',
             data: $("#EditCat").serialize()
         })
         .done(function (response) {
             $("#myModalEdit").html(response);
             $("#actionCon").html("");
         })
         .fail(function (XMLHttpRequest, textStatus, errorThrown) {
             alert("Fail");
         });
     });
 
     //Image Upload
     $("#imageUpload").change(function () {
         var element = this;
         var formData = new FormData();
         var totalFiles = element.files.length;

         for (var i = 0; i < totalFiles; i  ) {
             var file = element.files[i];
             formData.append("Photo", file);
         }
 
         $.ajax({
             type: 'POST',
             url: '/Shared/UploadImage',
             dataType: 'Json',
             data: formData,
             contentType: false,
             processData: false
         })
 
        .done(function (response) {
 
            if (response.Success) {
                $("#ImageURLEdit").val(response.ImageURL);
                $("#EditCatImage").attr("src", response.ImageURL);   
            }
        })
        .fail(function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Fail");
        });
}); 
</script>
 

Теперь, когда я нажимаю на кнопку редактирования, всплывающее окно не отображается, а браузер показывает, как положение зависания.

После нажатия на кнопку «Изменить» снимок экрана прилагается.