Harshil Shah Harshil Shah - 6 months ago 15
Javascript Question

MVC View-> JavaScript->Controller method->Javascript->Div tag

I have a create,edit,delete application On my Index view i have Button for Edit. by clicking this button it should open pop up in which all data should be displayed for editing.

To achieve this i passed ID of that row which is getting Edited. see code below :

<td>
<button type="button" onclick="EditPopup(@item.Id)">Edit</button>
</td>


here i am passing ID to my EditPopup javascript method. see the method below :

<script type="text/javascript">
$(document).ready(function () {
$("#EditDialog").dialog({
autoOpen: false,
title: 'Title',
width: 'auto',
height: 'auto',
modal: true
});
});

function EditPopup(Get_Id) {
alert(Get_Id) // I am getting correct ID here.
$.ajax({

method: "POST",
url: '@Url.Action("Edit","Home")',
dataType: 'json',
cache: false,
data:{Get_Id}, // tried : {id:Get_Id} , {id:"Get_Id"} not working
success: function (data) {

$('#EditDialog').html(data);
}

});
$("#EditDialog").dialog("open");
}</script>


I am sending value of ID to my Controller method Edit thats why i am using Post method in ajax call. Edit is name of method and Home is name of controller.

HomeController Edit methods

[HttpPost]
public JsonResult Edit(int? id)
{

FloorFactor floorFactor = db.FloorFactors.Find(id);

return Json(floorFactor, JsonRequestBehavior.AllowGet);
}

// POST:
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{

FloorFactor floorFactor = db.FloorFactors.Find(id);

return View(floorFactor);
}


in few examples i saw that in ajax call they usually use json result method. so that is the reason i also used json result method.

finally Code which is in my index view where i will show pop up result.

<div id="EditDialog" style="display:none;">
<label> Floor Factor </label>
<br />
<label> Effective From :</label>




So the Whole scenario is :

I send id value on button click event to javascript.

on javascript i make a call to my controller method to get data.

those should pass in EditDialog box of div.

on div block it should display in pop up.

Current output :

enter image description here

I also want to understand how url field works in ajax call.

if i am getting multiple column results as output of that url how can i collect all output in Data part of ajax call.

please also explain on success what parameters i can pass in function.

Thank you for explanation and help.

Edit : It shows no error on console tab.
Html Screen of browser when i click on button
Last Part of Script tab
as shown in this script tab i think it is sending a request as it generates request Id.

Answer

Try the below changes

Action Code :

[HttpPost]
    public JsonResult Edit(int? id)
    {

        FloorFactor floorFactor = db.FloorFactors.Find(id);

        return Json(floorFactor, JsonRequestBehavior.AllowGet);
    }

View Changes

<div id="EditDialog" style="display:none;">
<label> Floor Factor </label> <span id="floorFactor"></span>
<br />
<label> Effective From :</label> <span id="effectiveFrom"></span>

Success method changes

      if(data)
      {
//  GET VALUES
         var floorFactor = data.Property_Having_FloorFactor;
         var effectiveFrom = data.Property_Having_EffectiveFrom; 
// ASSIGN VALUES
         $('#floorFactor').text(floorFactor);
         $('#effectiveFrom ').text(effectiveFrom );
// OPEN DIALOG
         $("#EditDialog").dialog("open");
      }

Hope it will work for you.

Comments