MVC ASP.NET AJAX ACTION LINK CREATE

Question

Hello could anybody Help me about passing the value of a textbox from form using Ajax Actionlink. It's been whole day figuring out still I'm getting value of null.

Im using pure Ajax Action link with out Any button.

here is the sample of delete ajax action link works perfect! http://www.joe-stevens.com/2010/02/16/creating-a-delete-link-with-mvc-using-post-to-avoid-security-issues/

But using it in form collection the value always null. Any help Appreciated Thanks!

here is my code:

CustomerVIEW

<%= Html.TextBoxFor(model => model.Fname, new {  id = "Fname" })%>
<%= Html.TextBoxFor(model => model.Lname, new {    id = "Lname"})%>


 <%= Ajax.ActionLink("Create", "Create", 
                    new { id = 1}, 
                    new AjaxOptions { 
                            HttpMethod="POST",
                            OnFailure = "function() { alert('fail'); }",
                            OnSuccess = "function() { alert('success'); }" 
                        })%>

}

CustomerController

[AcceptVerbs(HttpVerbs.Post)] public ActionResult Create(FormCollection formCollection) {

        clsCustomer objcustomer = new clsCustomer();
        clsSession objSession = new clsSession();


        objcustomer.Fname = formCollection["Fname"];  --> NULL 
        objcustomer.Lname = formCollection["Lname"]; --> NULL

        }

score 0 · Answer 1 · answered Jul 26 '13 at 09:34

0

We should not use FormCollection in ASP.NET MVC applications. We should define a view model and have the controller action take this view model as argument. Properties will be automatically populated by the default model binder. That's the beauty of MVC.

public class YourViewModel
{
    public string Property1 { get; set; }
    public int Property2 { get; set; }
}



public Customer(YourViewModel model)
{

}

However Formcollection will hold values that is being posted. In your case

new { id = 1},

Id will only be posted, you need to pull out values for FName and LName before posting it to the controller

answered Jul 26 '13 at 09:34

Nipun Ambastha

2,553
1
16
26

Hello Sir I'm still getting null value. I'm Sorry I forgot to say that I'm working in editable grid View. The method above does not work. – user2528270 Jul 26 '13 at 10:16
As per your link, why do you need id=1? Link that you have mentioned in question is for Delete and you are doing create which is a different thing. For create you will need to post values to the controller. – Nipun Ambastha Jul 26 '13 at 10:20
As I said use View model to save content – Nipun Ambastha Jul 26 '13 at 10:23
The Delete Scenario Sir was my reference doing Crude but not using button just AJAX Action link. The Value 1 was just a static value for item_id that was stored on ViewData["item_id"] which will be use to store in database as item_id,fname,lname. The item_id was polulated from my main table tblitems – user2528270 Jul 26 '13 at 10:34
I am not sure how you will be doing with Ajax Action link. As user will be entering data in text boxes so that needs to be found and send to controller. Probably give a shot by Jquery. – Nipun Ambastha Jul 26 '13 at 10:54
Sir Here is the 2 Screenshots I created Please check. 1. http://s9.postimg.org/oye3qig2n/image.jpg 2. http://s2.postimg.org/sk6yk2f7d/image.jpg – user2528270 Jul 26 '13 at 12:25
Ok, this can easily be done in jqyuery, see some examples here. http://stackoverflow.com/questions/9819038/jquery-find-textbox-values-within-a-table-through-each-loop http://stackoverflow.com/questions/2668464/how-to-get-the-value-from-a-textbox-that-is-next-to-my-text – Nipun Ambastha Jul 26 '13 at 12:28

score 0 · Answer 2 · answered Jul 26 '13 at 09:54

0

Try this

@Html.TextBoxFor(model => model.Name, new { @id = "txtname", onclick='OnEditClick(" + item.ActionID + ")' })

function OnEditClick(id) { var id= id;

        $.ajax({

            url: 'EditAction',
            type: 'POST',
            data: JSON.stringify({ id:id  }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (result) {
               $('#lblMessageSuccess').html('Success');
            },
            error: function () {
                $('#lblMessageSuccess').html('Fail').fadeIn();
            }
        });
        return false;
    };

answered Jul 26 '13 at 09:54

Janki

481
2
10

Sir Here is the 2 Screenshots I created Please check. 1. http://s9.postimg.org/oye3qig2n/image.jpg 2. http://s2.postimg.org/sk6yk2f7d/image.jpg – user2528270 Jul 26 '13 at 12:24
actually what u want ? i cant understand.what u want to say by this screenshot ? – Janki Jul 26 '13 at 12:30
when I fill up the blank textbox and click the Insert link it will dynamically save to the database then return to the same page. – user2528270 Jul 26 '13 at 12:45

score 0 · Answer 3 · answered Jul 26 '13 at 10:16

Did you put your controls inside a form? Delete (as you mentioned) will work just with the id (which you are adding in the ajax link), but create needs data for the object to be created.

Either put your html inside a form like

    @using (Ajax.BeginForm("Create", new AjaxOptions { HttpMethod = "POST", OnSuccess = "alert('success')", OnFailure = "alert('fail')" }))
    {
        @*- your input fields - *@
        <input type="submit" value="Create" />   
    }

OR do it in script, like

    $('#yourlink').click(function(){
        $.ajax({
        type: "POST",
        url: '@Url.Action("Create")',
        data: $('#yourFormId').serialize()
    })
    .done(function() { alert("success"); })
    .fail(function() { alert("error"); });

Check for syntax errors, this code was not tested.

score 0 · Answer 4 · edited May 23 '17 at 11:51

While using Ajax Action link, you are sending id as the only parameter. Since this is not a form post FormsCollection will be empty when you try to access the

objcustomer.Fname = formCollection["Fname"];
objcustomer.Lname = formCollection["Lname"];

If you notice the link you have shared, its just expecting only one argument as an Action Method parameter that is id.

From the code you have given it seems that you want to post the data from those two Fname & Lname (though these names are not upto standards) to server & save it, you might want to take a look at below link.

Stckoverflow Answer How to use Simple Ajax Beginform in Asp.net MVC 4?

Working example http://www.c-sharpcorner.com/UploadFile/3d39b4/working-with-html-beginform-and-ajax-beginform-in-mvc-3/

MVC ASP.NET AJAX ACTION LINK CREATE

}

4 Answers4