JQuery 사용해서 HTML에서 Controller Actions 호출하는 방법

MVC 코드를 작성하다보면 어쩔 수 없이 JQuery를 사용하게 되는데 이때 유용한 코드를 살펴보자.

• $.get()
• $.post()

 $.get() 매소드

 

a. 인자를 전달하지 않는 경우

Controller

public string SaveEmployeeRecord()  
{  
   string res = "this is return value";  
   // do here some operation  
   return res;  
}

View

$.get("/Home/SaveEmployeeRecord",null, function (data) {  
   alert(data);  
});

 

b. 인자를 전달하는 경우

Controller

public string SaveEmployeeRecord(string name)  
{  
   string res = name;  
   // do here some operation  
   return res;  
}

View

$.get("/Home/SaveEmployeeRecord", {name:'Deepak'}, function (data) {  
    alert(data);  
});

 

c. JSON 데이터를 반환하면서 인자를 전달하는 경우

Controller

public JsonResult SaveEmployeeRecord(string id,string name)  
{  
   string this_id = id;  
   string this_name = name;  
   // do here some operation  
   return Json(new {id=this_id,name = this_name },JsonRequestBehavior.AllowGet);  
}

View

$.get("/Home/SaveEmployeeRecord", {id:'67',name:'Deepak'}, function (data) {  
  alert(data.id); // display id value which is returned from the action method  
  alert(data.name);//display name value which is returned from the action method  
});

 

$.post() 매소드

 

a. 인자를 전달하지 않는 경우

Controller

public string SaveEmployeeRecord()  
{  
   string res = "this is return value";  
   // do here some operation  
   return res;  
}

View

$.post("/Home/SaveEmployeeRecord",null, function (data) {  
   alert(data);  
});

 

b. 인자를 전달하는 경우

Controller

public string SaveEmployeeRecord(string name)  
{  
   string res = name;  
   // do here some operation  
   return res;  
}

View

$.post("/Home/SaveEmployeeRecord", {name:'Deepak'}, function (data) {  
    alert(data);  
});

 

c. JSON 데이터를 반환하면서 인자를 전달하는 경우

Controller

public JsonResult SaveEmployeeRecord(string id,string name)  
{  
   string this_id = id;  
   string this_name = name;  
   // do here some operation  
   return Json(new {id=this_id,name = this_name },JsonRequestBehavior.AllowGet);  
}

View

$.post("/Home/SaveEmployeeRecord", {id:'67',name:'Deepak'}, function (data) {  
  alert(data.id); // display id value which is returned from the action method  
  alert(data.name);//display name value which is returned from the action method  
});

 

참조 사이트 : Useful Way to Call Controller Actions From HTML Using jQuery (c-sharpcorner.com)