Hi team,
I am facing problem in MVC project. i have created asp.net project with Database first approach but when trying to open edit page using popup dialogue the dialogue didn't show.
now when click on edit button no popup shows and browser shows like hang position.
1. Tables class using auto generated table class created at the time of adding entity framework module
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; }
}
}
2. This is my controller actions.
[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");
}
3. Edit Button to call Popup Dilouge in Index page
<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>
4. Edit page code
@{
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">×</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 also attached
<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>
Regards,
Shoaib Shafiq
