ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2017 www.aspforums.com. All rights reserved.CRUD operation using Ajax jQuery without Entity Framework in ASP.Net MVCHi @iammann,<br />Please try the following<br /><br /><a href = 'link(Threads/109735/Crud-operation-in-ASPNet-MVC-using-Entity-Framework-Code-First-Approach-with-Primary-and-Foreign-Key-Relation/)'>Crud operation in ASP.Net MVC using Entity Framework Code First Approach with Primary and Foreign Key Relation</a><br /><br />It might help you.<br /><br />Cheers Andrea.http://www.aspforums.net/Threads/634558/CRUD-operation-using-Ajax-jQuery-without-Entity-Framework-in-ASPNet-MVC/http://www.aspforums.net/Threads/634558/CRUD-operation-using-Ajax-jQuery-without-Entity-Framework-in-ASPNet-MVC/Sat, 10 Dec 2016 13:17:41 GMTCRUD operation using Ajax jQuery without Entity Framework in ASP.Net MVC<p>Hi&nbsp;<a class="username" rel="iammann">iammann,</a></p> <p>Refer the below links.</p> <ul> <li><a href="http://www.c-sharpcorner.com/article/crud-operation-in-asp-net-mvc-using-jquery-json-with-dapper/">http://www.c-sharpcorner.com/article/crud-operation-in-asp-net-mvc-using-jquery-json-with-dapper/</a></li> <li><a href="http://www.dotnetawesome.com/2015/05/part-1-how-to-basic-crud-operations-using-jquery-ajax-model-popup-mvc4.html">http://www.dotnetawesome.com/2015/05/part-1-how-to-basic-crud-operations-using-jquery-ajax-model-popup-mvc4.html</a></li> </ul> <p>&nbsp;</p>http://www.aspforums.net/Threads/634558/CRUD-operation-using-Ajax-jQuery-without-Entity-Framework-in-ASPNet-MVC/http://www.aspforums.net/Threads/634558/CRUD-operation-using-Ajax-jQuery-without-Entity-Framework-in-ASPNet-MVC/Mon, 12 Dec 2016 00:36:58 GMTCRUD operation using Ajax jQuery without Entity Framework in ASP.Net MVC<p>Hi&nbsp;<a class="username" rel="iammann">iammann,</a></p> <p>Here i have created sample&nbsp;using jQuery without entity framework.</p> <p>For this sample i&nbsp;have used NorthWind database which you can get by clicking on the link below.</p> <p><a href="http://www.microsoft.com/Downloads/details.aspx?FamilyID=06616212-0356-46a0-8da2-eebc53a68034" target="_blank">Download Northwind Database</a></p> <p>Or you can create the table like below.</p> <pre class="brush: sql">CREATE TABLE Employees ( EmployeeID INT IDENTITY(1,1) NOT NULL, LastName NVARCHAR(20) NOT NULL, FirstName NVARCHAR(10) NOT NULL, City NVARCHAR(15) NULL, ReportsTo INT NULL )</pre> <p>Now follow the below steps.</p> <p><strong>Step 1:</strong>&nbsp;As&nbsp;usual create a MVC&nbsp;project.</p> <p><strong>Step 2:</strong>&nbsp;Create Model Class by right clicking on model folder. Here i have created with the name&nbsp;Employee.</p> <pre class="brush: csharp">public class Employee { public int EmployeeID { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string City { get; set; } public int? ReportsTo { get; set; } }</pre> <p><strong>Step 3 :</strong>&nbsp;Create Controller. Here i have created with the name Home.</p> <pre class="brush: csharp">public class HomeController : Controller { string str = ConfigurationManager.ConnectionStrings[1].ConnectionString; public List&lt;Employee&gt; GetEmployees() { List&lt;Employee&gt; employees = new List&lt;Employee&gt;(); using (SqlConnection con = new SqlConnection()) { con.ConnectionString = str; using (SqlCommand cmd = new SqlCommand()) { cmd.Connection = con; cmd.CommandText = "SELECT TOP 10 EmployeeID,LastName,FirstName,City,ReportsTo FROM Employees ORDER BY EmployeeID DESC"; con.Open(); using (SqlDataReader sdr = cmd.ExecuteReader()) { if (sdr.HasRows) { while (sdr.Read()) { Employee emp = new Employee() { EmployeeID = Convert.ToInt32(sdr["EmployeeId"]), FirstName = sdr["FirstName"].ToString(), LastName = sdr["LastName"].ToString(), City = sdr["City"].ToString(), ReportsTo = Convert.ToInt32(sdr["ReportsTo"] == DBNull.Value ? null : sdr["ReportsTo"]) }; employees.Add(emp); } } } con.Close(); } } return employees; } public void Add(Employee employee) { using (SqlConnection con = new SqlConnection()) { con.ConnectionString = str; using (SqlCommand cmd = new SqlCommand()) { cmd.Connection = con; cmd.CommandText = "INSERT INTO Employees(LastName,FirstName,City,ReportsTo) VALUES(@LastName,@FirstName,@City,@ReportsTo)"; cmd.CommandType = CommandType.Text; cmd.Parameters.AddWithValue("@FirstName", employee.FirstName); cmd.Parameters.AddWithValue("@LastName", employee.LastName); cmd.Parameters.AddWithValue("@City", employee.City); cmd.Parameters.AddWithValue("@ReportsTo", employee.ReportsTo); con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } } public void Update(Employee employee) { using (SqlConnection con = new SqlConnection()) { con.ConnectionString = str; using (SqlCommand cmd = new SqlCommand()) { cmd.Connection = con; cmd.CommandText = "UPDATE Employees SET LastName = @LastName,FirstName = @FirstName,City = @City WHERE EmployeeID = @EmployeeID"; cmd.Parameters.AddWithValue("@EmployeeID", employee.EmployeeID); cmd.Parameters.AddWithValue("@FirstName", employee.FirstName); cmd.Parameters.AddWithValue("@LastName", employee.LastName); cmd.Parameters.AddWithValue("@City", employee.City); con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } } public void Delete(int id) { using (SqlConnection con = new SqlConnection()) { con.ConnectionString = str; using (SqlCommand cmd = new SqlCommand()) { cmd.Connection = con; cmd.CommandText = "DELETE FROM Employees WHERE EmployeeID = @EmployeeID"; cmd.Parameters.AddWithValue("@EmployeeID", id); con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } } public ActionResult Index() { return View(); } public JsonResult GetAllEmployees() { return Json(GetEmployees().ToList(), JsonRequestBehavior.AllowGet); } public ActionResult AddEmployee() { return View(); } [HttpPost] public JsonResult AddEmployee(Employee emp) { try { Add(emp); return Json("Records added Successfully."); } catch { return Json("Records not added,"); } } public ActionResult UpdateEmployee(int? id) { return View(GetEmployees().Find(e =&gt; e.EmployeeID == id)); } [HttpPost] public JsonResult UpdateEmployee(Employee emp) { Update(emp); return Json("Records updated successfully.", JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult DeleteEmployee(int id) { Delete(id); return Json("Records deleted successfully.", JsonRequestBehavior.AllowGet); } [HttpGet] public PartialViewResult EmployeeDetails() { return PartialView("_EmployeeDetails"); } }</pre> <p><strong>Step 4:&nbsp;</strong>Create Views.</p> <p>To view the employee details let us create the partial view named _EmployeeDetails inside Home folder.</p> <p><strong>_EmployeeDetails.cshtml</strong></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { var tr; $.getJSON(&#34;/Home/GetAllEmployees&#34;, function (json) { $.each(json, function (i, emp) { var empid = emp.EmployeeID; tr = $(&#39;&lt;tr/&gt;&#39;); tr.append(&#34;&lt;td class=&#39;FirstName&#39;&gt;&#34; + emp.FirstName + &#34;&lt;/td&gt;&#34;); tr.append(&#34;&lt;td class=&#39;LastName&#39;&gt;&#34; + emp.LastName + &#34;&lt;/td&gt;&#34;); tr.append(&#34;&lt;td class=&#39;City&#39;&gt;&#34; + emp.City + &#34;&lt;/td&gt;&#34;); tr.append(&#34;&lt;td class=&#39;ReportsTo&#39;&gt;&#34; + emp.ReportsTo + &#34;&lt;/td&gt;&#34;); tr.append(&#34;&lt;td&gt;&#34; + &#34;&lt;a Onclick=&#39;return false;&#39; class=&#39;DeleteCss&#39; href=/Home/DeleteEmployee/&#34; + empid + &#34;&gt;Delete&lt;/a&gt;&#34; + &#34; | &#34; + &#34;&lt;a class=&#39;EditCss&#39; href=/Home/UpdateEmployee/&#34; + empid + &#34;&gt;Edit&lt;/a&gt;&#34; + &#34;&lt;/td&gt;&#34;); $(&#39;#tblEmployee&#39;).append(tr); }); }); $(&#39;#tblEmployee&#39;).on(&#39;click&#39;, &#39;td a.DeleteCss&#39;, function () { var deleteUrl = $(this).attr(&#34;href&#34;); if (confirm(&#34;Are you sure wants to delete ?.&#34;)) { $.ajax({ url: deleteUrl, dataType: &#34;json&#34;, type: &#34;POST&#34;, contentType: &#34;application/json&#34;, error: function (err) { alert(&#39;Unable to delete record.&#39;); }, success: function (response) { $(&#39;#employeeList&#39;).load(&#34;/Home/EmployeeDetails&#34;); } }); } }); }); &lt;/script&gt; &lt;table id=&#34;tblEmployee&#34; class=&#34;table table-bordered table-hover&#34;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;th&gt;City&lt;/th&gt; &lt;th&gt;Report To&lt;/th&gt; &lt;th&gt;Action&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt;&lt;/tbody&gt; &lt;/table&gt; </pre> <p>To create the View for add and update, right click on view folder and then click&nbsp;<strong>Add view</strong>. Now specify the view name as I have AddEmployee/UpdateEmployee or as you wish, select appropriate template name(For AddEmployee select Create, for UpdateEmployee select Edit) and select model class(Employee (CrudWithADONetAjaxjQuery.Models)) and click&nbsp;on Add<em>&nbsp;</em>button.</p> <p><strong>AddEmployee.cshtml</strong></p> <pre class="brush: html">@model CrudWithADONetAjaxjQuery.Models.Employee @{ ViewBag.Title = &#34;Add Employee&#34;; } &lt;h2&gt;Add Employee&lt;/h2&gt; &lt;script src=&#34;~/Scripts/jquery-1.10.2.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;~/Scripts/jquery.validate.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;~/Scripts/jquery.validate.unobtrusive.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function () { $(&#34;#btnAdd&#34;).click(function () { var employee = { FirstName: $(&#34;#FirstName&#34;).val(), LastName: $(&#34;#LastName&#34;).val(), City: $(&#34;#City&#34;).val(), ReportsTo: $(&#34;#ReportsTo&#34;).val() }; $.ajax({ type: &#34;POST&#34;, URL: &#34;/Home/AddEmployee&#34;, dataType: &#34;json&#34;, contentType: &#34;application/json&#34;, data: JSON.stringify({ emp: employee }), success: function (response) { $(&#39;#employeeList&#39;).load(&#34;/Home/EmployeeDetails&#34;); }, error: function (response) { alert(response.responseText); } }); }); }); &lt;/script&gt; &lt;div class=&#34;form-horizontal&#34;&gt; &lt;h4&gt;&lt;/h4&gt; &lt;hr /&gt; @Html.ValidationSummary(true, &#34;&#34;, new { @class = &#34;text-danger&#34; }) &lt;div class=&#34;form-group&#34;&gt; @Html.LabelFor(model =&gt; model.FirstName, htmlAttributes: new { @class = &#34;control-label col-md-2&#34; }) &lt;div class=&#34;col-md-10&#34;&gt; @Html.EditorFor(model =&gt; model.FirstName, new { htmlAttributes = new { @class = &#34;form-control&#34; } }) @Html.ValidationMessageFor(model =&gt; model.FirstName, &#34;&#34;, new { @class = &#34;text-danger&#34; }) &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; @Html.LabelFor(model =&gt; model.LastName, htmlAttributes: new { @class = &#34;control-label col-md-2&#34; }) &lt;div class=&#34;col-md-10&#34;&gt; @Html.EditorFor(model =&gt; model.LastName, new { htmlAttributes = new { @class = &#34;form-control&#34; } }) @Html.ValidationMessageFor(model =&gt; model.LastName, &#34;&#34;, new { @class = &#34;text-danger&#34; }) &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; @Html.LabelFor(model =&gt; model.City, htmlAttributes: new { @class = &#34;control-label col-md-2&#34; }) &lt;div class=&#34;col-md-10&#34;&gt; @Html.EditorFor(model =&gt; model.City, new { htmlAttributes = new { @class = &#34;form-control&#34; } }) @Html.ValidationMessageFor(model =&gt; model.City, &#34;&#34;, new { @class = &#34;text-danger&#34; }) &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; @Html.LabelFor(model =&gt; model.ReportsTo, htmlAttributes: new { @class = &#34;control-label col-md-2&#34; }) &lt;div class=&#34;col-md-10&#34;&gt; @Html.EditorFor(model =&gt; model.ReportsTo, new { htmlAttributes = new { @class = &#34;form-control&#34; } }) @Html.ValidationMessageFor(model =&gt; model.ReportsTo, &#34;&#34;, new { @class = &#34;text-danger&#34; }) &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;div class=&#34;col-md-offset-2 col-md-10&#34;&gt; &lt;input type=&#34;submit&#34; id=&#34;btnAdd&#34; value=&#34;Add&#34; class=&#34;btn btn-default&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34; id=&#34;employeeList&#34;&gt; &lt;div class=&#34;col-md-12&#34;&gt; @Html.Partial(&#34;_EmployeeDetails&#34;) &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p><strong>UpdateEmployee.cshtml</strong></p> <pre class="brush: html">@model CrudWithADONetAjaxjQuery.Models.Employee @{ ViewBag.Title = &#34;Update Employee&#34;; } &lt;h2&gt;Update Employee&lt;/h2&gt; &lt;script src=&#34;~/Scripts/jquery-1.10.2.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;~/Scripts/jquery.validate.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;~/Scripts/jquery.validate.unobtrusive.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function () { $(&#34;#btnUpdate&#34;).click(function () { var employee = { EmployeeID: $(&#34;#hfEmployeeID&#34;).val(), FirstName: $(&#34;#FirstName&#34;).val(), LastName: $(&#34;#LastName&#34;).val(), City: $(&#34;#City&#34;).val() }; $.ajax({ type: &#34;POST&#34;, URL: &#34;/Home/UpdateEmployee&#34;, dataType: &#34;json&#34;, contentType: &#34;application/json&#34;, data: JSON.stringify({ emp: employee }), success: function (response) { window.location.href = &#34;/Home/AddEmployee&#34;; }, error: function (response) { alert(response.responseText); } }); }); }); &lt;/script&gt; &lt;div class=&#34;form-horizontal&#34;&gt; &lt;h4&gt;&lt;/h4&gt; &lt;hr /&gt; @Html.ValidationSummary(true, &#34;&#34;, new { @class = &#34;text-danger&#34; }) @Html.HiddenFor(model =&gt; model.EmployeeID, new { @id = &#34;hfEmployeeID&#34; }) &lt;div class=&#34;form-group&#34;&gt; @Html.LabelFor(model =&gt; model.FirstName, htmlAttributes: new { @class = &#34;control-label col-md-2&#34; }) &lt;div class=&#34;col-md-10&#34;&gt; @Html.EditorFor(model =&gt; model.FirstName, new { htmlAttributes = new { @class = &#34;form-control&#34; } }) @Html.ValidationMessageFor(model =&gt; model.FirstName, &#34;&#34;, new { @class = &#34;text-danger&#34; }) &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; @Html.LabelFor(model =&gt; model.LastName, htmlAttributes: new { @class = &#34;control-label col-md-2&#34; }) &lt;div class=&#34;col-md-10&#34;&gt; @Html.EditorFor(model =&gt; model.LastName, new { htmlAttributes = new { @class = &#34;form-control&#34; } }) @Html.ValidationMessageFor(model =&gt; model.LastName, &#34;&#34;, new { @class = &#34;text-danger&#34; }) &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; @Html.LabelFor(model =&gt; model.City, htmlAttributes: new { @class = &#34;control-label col-md-2&#34; }) &lt;div class=&#34;col-md-10&#34;&gt; @Html.EditorFor(model =&gt; model.City, new { htmlAttributes = new { @class = &#34;form-control&#34; } }) @Html.ValidationMessageFor(model =&gt; model.City, &#34;&#34;, new { @class = &#34;text-danger&#34; }) &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group&#34;&gt; &lt;div class=&#34;col-md-offset-2 col-md-10&#34;&gt; &lt;input type=&#34;submit&#34; id=&#34;btnUpdate&#34; value=&#34;Update&#34; class=&#34;btn btn-default&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </pre> <p><strong>Step 9: </strong>Now<strong>&nbsp;</strong>Run the Application.</p> <p><img src="http://i1030.photobucket.com/albums/y364/dharmendra283/ExcelaSoft/634558.gif" alt="" width="499" height="582" /></p>http://www.aspforums.net/Threads/634558/CRUD-operation-using-Ajax-jQuery-without-Entity-Framework-in-ASPNet-MVC/http://www.aspforums.net/Threads/634558/CRUD-operation-using-Ajax-jQuery-without-Entity-Framework-in-ASPNet-MVC/Mon, 12 Dec 2016 07:40:58 GMT