وارد کردن داده در دیتابیس با متد jQuery POST در MVC

در این مقاله با هم خواهیم آموخت که چگونه داده ها را با استفاده از متد 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 همه ی صفحه به دیتابیس وارد کنیم.

موفق باشید !