Create & Update

Ramco Ramco

How to create a single Partial View for Create & Update . All Data Annotation values should get implemented at Client Side.using Modal Popup

public class Customer
{
public Customer()
{
}

[Key]
[Required(ErrorMessage = "Id cannot be Blank. Max length should be less than or equal to 20."), MaxLength(20)]
[Display(Name = "Id")]
public string Id { get; set; }

[Display(Name = "Description")]
[Required(ErrorMessage = "Customer Name cannot be Blank. Max length should be less than or equal to 50"), MaxLength(50)]
public string Description { get; set; }

[Display(Name = "Active")]
public bool IsActive { get; set; }

}

Thanks

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
let me know what does it alert here
$.get("/Customer/CreateEdit?Id=" + Id, function (data) {
//alert("hi");
alert(data); //here
$("#AnyDiv").html(data);
$("#UpSertModal").modal('open');
});
if it alerts html then everything is correct otherwise you have some reference missing.
+1
Sachin Singh5y ago
are you getting any errors on the console?
0
Ramco Ramco5y ago
Hi Sachin

I have changed but pop does not open
$("#btnEdit").click(function(){
var data = $(this).parents('tr').find('td');
var Id = data.eq(0).html();
$.get("/Customer/CreateEdit?Id=" + Id, function (data) {
console.log(data);
$("#AnyDiv").html(data);
$("#UpSertModal").modal('open');
});
});

Thanks
+1
Sachin Singh5y ago
add reference of Jquery in your main view or layout

and Html is small html

$("#anyDiv").html(data);
0
Ramco Ramco5y ago
Hi

On below line it is giving error - $(...).Html is not a function

$("#AnyDiv").Html(data);

Index View

Thanks
+1
Sachin Singh5y ago
anydiv is any div in your main view
// main view
//add button
// table with data having two buttons edit and delete
"anyDiv">

Kirtesh Shah5y ago

See below article for Data Annotation at client side

https://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/enabling-client-side-validation-on-custom-data-annotations-w/

Also see below article for Create and Update Partial view

https://oakdome.com/programming/MVC_Inserting&Updating_with_Partial_Views.php

Hope it will help you

Sachin Singh5y ago

step 1. Create one partial view ("_UpSert") as shown below, just copy and paste.

@model YourprojectName.Models.Customer
class="modal" tabindex="-1" role="dialog" id="UpSertModal">
class="modal-dialog" role="document">
class="modal-content">
class="modal-header">
@*"button" class="close" data-dismiss="modal">"true">×class="sr-only">Close*@
class="modal-danger">Delete Confirmation

class="modal-body">

@using (Html.BeginForm("UpSert", "Controller", FormMethod.Post)){

@Html.AntiForgeryToken()

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

//@Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-2" })

//@Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })

"hidden" Name="Id" value="@Model.Id"/>

@Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control", @Value="Model.Description" } })

@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.CheckBoxFor(model => model.IsActive,new{@checked=(Model.IsActive==true?"checked":"")})

@Html.ValidationMessageFor(model => model.IsActive, "", new { @class = "text-danger" })

}

class="modal-footer">

"button" class="btn btn-secondary" data-dismiss="modal">Cancel

"submit" class="btn btn-danger">Delete

step 2. Create a method to return the above partial view

public ActionResult GetPartialView(int Id=0)
{
if(Id==0)
{
return PartialView("_UpSert",new Customer());
}
else
{
Customer obj= new Customer();
using(SqlConnection con= new SqlConnection("constring"))
{
SqlCommand cmd= new SqlCommand("select 8 from Customer where Id=@Id");
cmd.Parameters.AddWithValue("@Id",Id);
con.Open();
SqlDataReader rdr= cmd.ExecuteReader();
While(rdr.Read())
{
obj.Id= Convert.ToInt32(rdr[0]);
obj.Description= rdr[1].ToString();
obj.IsActive= Convert.ToBoolean(rdr[1]);
}
}
return PartialView("_UpSert",obj)
}
}

step 3. On Add Click

$("#Add").Click(function(){
$.get("/Controller/GetPartialView", function(data){
$("#AnyDiv").Html(data);
$("#UpSertModal").modal('open');
});
});

step 4. On Edit click

$("#Edit").Click(function(){
var id= $(this).attr("data-Id");
$.get("/Controller/GetPartialView?Id="id, function(data){
$("#AnyDiv").Html(data);
$("#UpSertModal").modal('open');
});
});