Using JSON/Javascript to return table values to viewmodel/controller

Question

I'm relatively new to Javascript/JSON and I've been looking really long for an example of how to do this. Currently what I have in my View is

<p>Please enter your email and phone number registered with the account</p>
<table id="Table">
    <tr>
        <td>Email</td>
        <td> <input id = "email" type ="text" name= "email" /></td>
    </tr>
    <tr>
        <td>Phone Number</td>
        <td> <input id = "phone" type ="text" name= "phone" /></td>
    </tr>
</table>
<input type="button" value="Submit" id="sendMSG">

I'd like to send it to the following controler

 public JsonResult SendMessage(SMSTestViewModel model)
    {
   string email = model.email;
   string number = model.phone;
    }

What i'd like to do is to write a script to say that when I click the button, to send the information I put in the two textboxes to my viewmodel and then to my controller. I'd also like to do this while it doesn't referesh the page.

If you can possibly lead me in the right direction, that;d be awesome.

@Ek0nomik Yeah I remade it, the other one wasn't described properly. — user2094139, Jun 07 '13 at 20:20
Sorry, your questions is not super clear. You would like to insert two input boxes '''html ''' & '''html ''' when you click the submit button? — recneps, Jun 07 '13 at 20:31
@recneps No, when I click the submit button, I would like the send the text within those boxes to my controller/viewmodel. — user2094139, Jun 07 '13 at 20:36

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

I think I understand what you are looking for. You want to post the form to your SendMessage action result?

This is what you want.

function submit() {
    $.ajax({
        type: "POST",
        url: /SendMessage,
        contentType: "application/json",
        dataType: "json",
        data: { "email" : $("#email").value, "phone" : $("#phone").value }, 
        success: function (data) {
            console.log(data);
        },
        error: console.log("Where's the nearest bar?");
    });
}

$("#sendMSG").click(function () {
    submit();
});

Sorry, I assumed you were using JQuery.

If you do not want to use JQuery just change the.

$("#phone")

to

document.getElementById("phone")

And here is how to to a POST without JQuery.

How to make an AJAX call without jQuery?

Hope this helps.

edited May 23 '17 at 12:05

Community

1
1

answered Jun 07 '13 at 20:37

recneps

1,285
5
16
27

Hey, thanks for your answer @recnaps just a quick question. How do i connect it so that it runs when I click the button "sendMSG" – user2094139 Jun 07 '13 at 20:41
`` will do it, but if you want to add a click handler then this will do it as well. `$("#sendMSG").click(function () { submit(); });` Just a note, that if this inside a form you are going to want to disable the default action. – recneps Jun 07 '13 at 20:43
Hey @recneps the url you specified doesn't work as mentioned :( are there any ideas why? – user2094139 Jun 07 '13 at 20:57
So there are going to be a lot of nuances you may need to iron out. Those are going to include the routing in the asax file in your MVC application, allowing whatever http methods you want on your Method POST I assume, your also not returning anything from your SendMessage method? Also if the domain is different for some reason you are going to run into CORS issues. My advice is to read some more up on POSTing to an ActionResult, download REST client and make sure the POST works through the REST client locally and then move it into the JavaScript. – recneps Jun 07 '13 at 21:21
You probably just need to change this. `public JsonResult SendMessage(SMSTestViewModel model)` to `[AllowAnonymous] [HttpPost] public JsonResult SendMessage(SMSTestViewModel model) {` – recneps Jun 07 '13 at 21:22

Using JSON/Javascript to return table values to viewmodel/controller

1 Answers1