CODEWITHSUNDEEP
javascriptc#asp.netasp.net-mvc-4razor
Michael
Michael

Reputation: 749

ASP.NET MVC ActionResult POST without Submit

So I am very new ASP.NET MVC, I took an intro ASP.NET months and months ago, and have unfortunately forgotten nearly everything :(

I have been given a task to add a lookup button to a page that takes in a username from a textbox and verifies whether or not that username is valid. Image

enter image description here

I have spent hours and hours trying to get it to work. Unfortunately what i realllyyy need to do is sit down for a few weeks and re-teach myself and learn javascript, jquery, asp.net mvc. I am going to learn it all, but this assignment is to small and specific to spend weeks learning languages and frameworks just to begin solving.

Here is where i'm at:

Structure of Controller:

public class NewUserRequestController : Controller
{
    // GET: NewUserRequest
    public ActionResult Index()
    {
        return View(new NewUserRequest());
    }

    [HttpPost]
    [ValidateAntiForgeryToken()]
    public ActionResult LookupLDN(ITFormsLibrary.NewUserRequest req)
    {
        //Code that Verifies user etc
        return View(req);
    }

    [HttpPost]
    [ValidateAntiForgeryToken()]
    public ActionResult Submit(ITFormsLibrary.NewUserRequest req)
    {
            //Code that handles submission validation & errorvalidation 
            return View("Index", req);
    }
}

Now in the view, I have tried messing around with:

@using((Ajax.BeginForm("LookupLDN", "NewUserRequest", FormMethod.Post, new AjaxOptions { UpdateTargetId = "NewUserIfo"}, new { @class = "form-inline", role = "form" }))

Only to discover I can't nest forms.

I have tried: 

@Ajax.ActionLink("Lookup", "LookupLDN", "NewUserRequest", new { Model},null, new { @class = "form-inline", role = "form" })

and

@HTML.ActionLink("Lookup", "LookupLDN", "NewUserRequest", new { Model})

both of which return 404 for some reason.

I have also tried:

<input type="button" value="Lookup" onclick="return lookupLDN()"/>

But, I don't know how to construct a javascript statement to handle an asynchronous POST? - Should I even be trying to POST?

If any of you understand what I am trying to accomplish and can provide help, I would be extremely grateful. thank you!

Upvotes: 3

Views: 7608

Answers (1)

Moe
Moe

Reputation: 1599

How about JSON.

EDITED as per Tommy's comment. Use POST instead of GET.

It should be a POST method because you are sending data to the server and asking it to take action on that data (POST) and not just asking the server to give us information without sending it anything (GET). With POST, you can add checks around CSRF tokens, don't have to worry about the Googlebot doing something it shouldn't, etc.

HTML (VIEW)

 <input type="button" id="btnLookupUser" value="Lookup" />

JAVASCRIPT

$(document).ready(function () {
 $('#btnLookupUser').click(function () {
        var vUsername= $('#txtUserName').val();

        if (vUsername.trim() == '') {
            return;
        }
        else
        {
       //URL to your JSON method. (here I suppose you have a LookupUser action method. Change application path the way it works for you.)
         $.ajax({
        url: applicationPath + '/LookupUser',
        type: 'POST',
        dataType: 'json',
        data: { userName: encodeURIComponent(vUsername.trim()), 
        cache: false,
        success: function (result) {

           //Do your logic based on the result.
            switch (result) {
            case true:

                break;
            default:
                break;

            }
        },
         error: function (xhr, ajaxOptions, thrownError) {
         alert(xhr.status);
         alert(thrownError);
    })

    });
});

CONTROLLER 

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult LookupUser(string userName)
{ 
    //Your logic
    return Json("Whether is valid or not"); //You can as well deny GET   here.
}

Upvotes: 3

Related Questions