در این مقاله با هم خواهیم آموخت که چگونه داده ها را با استفاده از متد jQuery post در MVC ارسال کنیم که این کار داده ها به صورت همگام بدون نیاز به Post back کل صفحه وارد میشوند. خب پس بیاید اجرای این کار را در یک برنامه ی ساده MVC با هم ببینیم … با من همراه باشید …
jQuery post در MVC
گام اول
ایجاد یک برنامه MVC
حال بیاید که گام به گام این کار را با ایجاد یک برنامه ی MVC شروع کنیم. به ترتیب زیر :
منوی Start سپس All Programs و انتخاب Microsoft Visual Studio 2015 .
گزینه ی File سپس New و کلیک بر روی Project و پس از آن ASP.NET Web Application Template و در نهایت نامی مناسب برای پروژه انتخاب کنید و بر روی OK کلیک کنید.
گام دوم
افزودن کلاس Model
بر روی فولدر Model راست کلیک کنید و گزینه ی Add را انتخاب کنید و کلاسی با نام Empmodel.cs بسازید.
Empmodel.cs
public class EmpModel { public string Name { get; set; } public string City { get; set; } public string Address { get; set; } }
گام سوم
افزودن کنترلر
public class HomeController : Controller { private SqlConnection con; // GET: Home public ActionResult AddEmployee() { return View(); } //Post method to add details [HttpPost] public ActionResult AddEmployee(EmpModel obj) { AddDetails(obj); return View(); } //To Handle connection related activities private void connection() { string constr = ConfigurationManager.ConnectionStrings["SqlConn"].ToString(); con = new SqlConnection(constr); } //To add Records into database private void AddDetails(EmpModel obj) { connection(); SqlCommand com = new SqlCommand("AddEmp", con); com.CommandType = CommandType.StoredProcedure; com.Parameters.AddWithValue("@Name", obj.Name); com.Parameters.AddWithValue("@City", obj.City); com.Parameters.AddWithValue("@Address", obj.Address); con.Open(); com.ExecuteNonQuery(); con.Close(); } }
گام چهارم
افزودن View
بر روی فولدر View راست کلیک نمایید و یک View خالی با نام AddEmployee.cshtml به آن اضافه کنید.
گام پنجم
ایجاد متد jQuery Post
اکنون View جدیدی که ساختید را باز کنید و متد jQuery Post زیر را برای فراخوانی Controller ایجاد کنید :
<script> $(document).ready(function () { $("#btnSave").click(function () { $.ajax( { type: "POST", //HTTP POST Method url: "Home/AddEmployee", // Controller/View data: { //Passing data Name: $("#txtName").val(), //Reading text box values using Jquery City: $("#txtAddress").val(), Address: $("#txtcity").val() } }); }); }); </script>
نکته
برای کار با jQuery نیاز به ارجاع کتابخانه ی jQuery داریم. میتوانید از کتابخانه ی CDN jQuery زیر استفاده کنید :
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
یا از فایل jQuery آفلاین استفاده کنید.
حال پس از افزودن کتابخانه و فرم کنترل ها ، کد های مربوط به AddEmployee.cshtml به صورت زیر خواهد بود :
@{ ViewBag.Title = "www.compilemode.com"; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { $("#btnSave").click(function () { $.ajax( { type: "POST", //HTTP POST Method url: "Home/AddEmployee", // Controller/View data: { //Passing data Name: $("#txtName").val(), //Reading text box values using Jquery City: $("#txtAddress").val(), Address: $("#txtcity").val() } }); }); }); </script> <br /><br /> <fieldset> <div class="form-horizontal"> <div class="editor-label"> Name </div> <div class="editor-label"> <input type="text" id="txtName" /> </div> <div class="editor-label"> Address </div> <div class="editor-label"> <input type="text" id="txtAddress" /> </div> <div class="editor-label"> City </div> <div class="editor-label"> <input type="text" id="txtcity" /> </div> <div class="editor-label"> <br /> <input class="btn-default" type="button" id="btnSave" value="Save" /> </div> </div> </fieldset>
اکنون همه چیز مهیاست. برنامه را اجرا کنید و جزئیات را در فیلد ها وارد کنید.
پس از وارد کردن جزئیات بر روی دکمه ی ذخیره کلیک کنید . آنگاه جزئیات در داخل دیتابیس افزوده میشوند.
نکات ضروری
مقادیر معتبر تاریخی را در هنگام اجرا به عنوان ورودی وارد نمایید.
Connection String خود را بر اساس جزئیات سرورتان در فایل Web.Config تغییر دهید.
جمع بندی
از مثال بالا دریافتیم که چگونه داده ها را با استفاده از متد jQuery POST در MVC بدون نیاز به post back همه ی صفحه به دیتابیس وارد کنیم.
موفق باشید !
هیچ دیدگاهی نوشته نشده است.