I am Using MVC 3 + Razor. I have a MVC view called Details. I Retreived and Displayed the Details data from SQL server database table. I have a Clickable <a/> Column "Type". Clicking on the Type Anchor link Displays a Jquery Popup.

| type      |   date   | completed |  
|________________________________ _|  
|           |          |           |  
| sample    | 1/1/2012 |           |  
|(Clickable)|

1. How do I Retreive the entire row data related to Clicked element From the Table in SQL server and Display that Data on Jquery Dialog.Every Type Field has an ID associated with it.

2. I have a check box on Jquery Dailog. If its selected, the Completed column within the View Must have Current date and must Update Database table (Which contain a Date Field).

Looking for code samples or links or tutorials--haven't been able to find anything with Edit and add capability.

• jquery
• asp.net-mvc-3
• razor

I am not familiar with asp.net or razor, but I do know that with jQuery you would first make an ajax request to the server where a script would load the sql data, convert it to a JSON string, and send it back to jQuery. jQuery then can parse the JSON and populate the fields.

Dealing with dates in jQuery (javascript in general) can be tricky because it's based on the client's machine and not the server's. I would suggest running with ajax again, letting the server check against the current date and handling the database update.

Use partial view for popup, make the UI as per your requirment and pass row details as model to this partial view.

your table html looks like,

<tr id="@model.rowid">
        <td>
            sample
           (<a onclick="RowDetails(@model.rowid)">Clickable</a>)
        </td>
        <td>
            1/1/2012
        </td>
        <td>
        </td>
    </tr>

Call javascript function on click of Clicktable like,

function RowDetails(RowId) {
        $("#divDetails").load('/yourController/rowdetail', { id: RowId }).dialog({
            modal: true,
            title: "Row Detail",
            height: 400,
            width: 600,
            buttons: {
                "Ok": function () {
                    var isComplete = 0;
                    if ($("#rowComplete").is(":checked")) { isComplete = 1; }
                    $.get("/yourController/RowComplete", { id: RowId, isChk: isComplete }, function (d) {
                        $("#" + RowId).before(d).remove();
                        $("#" + RowId).hide().fadeIn('slow');
                    });
                    $(this).dialog('close');
                }
            }
        });
    }

and the controller like,

public ActionResult rowdetail(int id)
{
// code to get row from databse
// return this row as object to partial view
return("partial view for row details", Object);
}

public ActionResult RowComplete(int id, int chk)
{
// code to update row from databse
// return this row as object 
return("pass updated row", Object);
}