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

        }

Answer 1

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

Answer 2

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;
    };

Answer 3

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.

Answer 4

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/