How do I call Action method on grid column click & display data in Modal Popup?

Question

0.00/5 (No votes)

See more:

I am using Web Grid:

HTML

webGrid.Column("", format:
             @<text>
             <a class="edit-user display-mode">
<img src="@Url.Content("~/assets/images/Edit.gif")"></a>
</text>,style: "col1Width" , canSort: false),

On click of this Edit Column i am calling this script to get the ID of the record i want to Edit:

JavaScript

<script type="text/javascript">
        $('.edit-user').on('click',function(){
            var tr = $(this).parents('tr:first');
            var BranchContactID = tr.find("#hdnBranchContactID").val()
            alert(BranchContactID);         
 });
</script>

Now on click of this Edit i want an Action method to be called which will get the details of the record using the id i get from the script and "a modal popup should get displayed."

HTML

@using (Ajax.BeginForm("AddBranchContact", new AjaxOptions { HttpMethod = "POST",  OnSuccess = "$('#myModal1').modal('hide');", UpdateTargetId = "myTable" }))
{
   <div id="myModal1" class="modal fade" role="dialog">
}

Posted 17-Jan-16 22:05pm

Abrar Kazi

Updated 18-Jan-16 3:30am

Herman<T>.Instance

v6

Add a Solution

Comments

John C Rayan 18-Jan-16 8:53am

What is your issue? Specify your controller and action method in Ajax.BeginForm.

Abrar Kazi 19-Jan-16 2:14am

The problem is :

As u see above I am doing something on OnSuccess attribute. But when there is an OnSuccess=false scenario i dont want that modal to hide.
Any suggestions ?

AddBranchContact is my Action Method.

where i am doing this

ModelState.IsActive()
{
do something
}
else
{
return Onsuccess =false Note: How to send Onsuccess as false is also a problem.
}

And if false i dont want Modal to hide as written in Ajax.BeginForm

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

John C Rayan · Accepted Answer · 2016-01-18T23:09:00

Solution 1

Ajax.BeginForm has got two events for you. OnSuccess and OnFailure. The value for these are call back methods .(event handlers). So what you do in your controller for OnSuccess is wrong. OnSuccess keyword has nothing to do with server side controllers.

What you need to do is create two javascript functions one for OnSuccess and one for OnFailure. The OnFailure function will be called for any exceptions that occur during your JQuery call. OnSuccess will be called if there is no exception occurred.

In your scenario, return a flag to OnSuccess event handler and check the value of flag and accordingly hide or show your modal.

These examples will give you an idea

Using Ajax.BeginForm() with ASP.NET MVC[^]

Ajax modal forms in ASP.Net MVC |[^]

Posted 18-Jan-16 23:09pm

John C Rayan

Comments

Abrar Kazi 19-Jan-16 5:17am

Thank you so much John. I will definitely try these links and hope i'll solve my problem.

Abrar Kazi 19-Jan-16 5:19am

As u said :

In your scenario, return a flag to OnSuccess event handler and check the value of flag and accordingly hide or show your modal.

Can u tell me how to return flag from controller to Onsuccess event handler

John C Rayan 19-Jan-16 5:46am

Like this

public ActionResult Something()
{
return Json(new { result = 0, message = "Testing" });
}

...

new AjaxOptions { HttpMethod = "POST", OnSuccess= "something" }

...

function something(data) {
switch(data.result)
{
case 1:
alert(data.result)
break;
case 0:
alert(data.result)
break;
case -1:
alert(data.result)
break;
default:
alert(data.message);
}
}

Abrar Kazi 19-Jan-16 6:11am

Thank you very much. Solved.

Abrar Kazi 19-Jan-16 7:51am

As you said I returned result=0 and caught that in OnSuccess='script name'.
In the script,
if result = 0 i am not hiding the modal but the Fields do not show the validation messages..

Please see this:

<div class="col-md-6">
@Html.LabelFor(m => m.BranchContactDetails.FirstName)
<div >
@Html.EditorFor(m => m.BranchContactDetails.FirstName, new { htmlAttribute = new { @class = "form-control" } })
@Html.ValidationMessageFor(m => m.BranchContactDetails.FirstName, "", new { @class = "text-danger" })

</div>
</div>

if first name is not filled than ModelState.Isvalid = false so it will return:

return Json(new { result = 0 });

the modal will be as it is but the validation messages are not displayed

John C Rayan 19-Jan-16 9:54am

Show me your complete Controller action method

Abrar Kazi 20-Jan-16 0:45am

public ActionResult AddBranchContact(BranchViewModel objBranchContact)
{
List<BranchContact> BranchContactList = new List<BranchContact>();

if (ModelState.IsValid)
{

if (Session["BranchContactList"] == null)
{

BranchContactList.Add(objBranchContact.BranchContactDetails);
objBranchContact.BranchContactList = BranchContactList;
Session["BranchContactList"] = BranchContactList;
Session["BranchDetails"] = objBranchContact.BranchDetails;
return PartialView("BranchContactWebGridView", objBranchContact);
}
else
{
List<BranchContact> ContactList = Session["BranchContactList"] as List<BranchContact>;
ContactList.Add(objBranchContact.BranchContactDetails);
Session["BranchContactList"] = ContactList;
Session["BranchDetails"] = objBranchContact.BranchDetails;
objBranchContact.BranchContactList = ContactList;
return PartialView("BranchContactWebGridView", objBranchContact);
}
}
else
{

return Json(new { result = 0 });
}
}

Abrar Kazi 20-Jan-16 0:47am

@using (Ajax.BeginForm("AddBranchContact", new AjaxOptions { OnSuccess = "OnSuccess", UpdateTargetId = "myTable" }))
{
//contactModal code
}

<script type="text/javascript">
function OnSuccess(e) {
debugger;
if (e.result == 0)
{
$('#myModal1').modal('show');
}
else
{
$('#myModal1').modal('hide');
}
}

</script>

Abrar Kazi 20-Jan-16 0:51am

I have a Branch Page where in there is a BranchContactPerson Grid in the page.
If a Branch has 2 contact person i will have to add them. I click on a + sign(image) and a Bootstrap Modal Popup opens where i fill Name Department etc of that contact person and save.
On save the data i filled is showed in the grid.

This grid part and modal popup part has taken half of my life.

If i do this i think i can pretty much learn MVC.

This is my first project and i am 7 days old to MVC.

Abrar Kazi 20-Jan-16 0:56am

There are many questions i am unable to get answers for..

If my model state is true i am returning to Partial View if not i return Json..

I mean how do i come back to the script if i am sending data to partial view.

Its all messed up with only this grid part.

Please help

John C Rayan 20-Jan-16 3:54am

Why do you want to come back to script when you return partial view

Abrar Kazi 20-Jan-16 4:10am

see i am asking what is the better way to handle this scenario?

When i click on a AddNewContact a Bootstrap Popup appears i enter the fields in the popup and click on save. This saved record is displayed in the webgrid.
(Before saving this record i want to check if ModelState.Isvalid is true or not. If yes save record in session n display in webgrid. If not it should show required Fields error in the popup.)

John C Rayan 20-Jan-16 10:19am

You shouldn't use session for this anyway which is different matter altogether. Use ViewBag.

Abrar Kazi 21-Jan-16 2:49am

Session i am using to temporarily store BRANCH CONTACT Details. At Final SAVE button data will be saved as

2 or n BranchContacts against 1 Branch.

John C Rayan 20-Jan-16 3:50am

Did you have a look at jqgrid for what you are trying to do

Abrar Kazi 20-Jan-16 4:11am

i am using webgrid

Abrar Kazi 20-Jan-16 4:11am

can i send u images to clear the scenario ?
can i have a skypeid or emaild id of yours.

John C Rayan 20-Jan-16 4:50am

give me yours and send you an email.

Abrar Kazi 21-Jan-16 2:50am

have sent u a mail with my requirements