How to Insert Data Via Ajax In MVC3?

Question

0.00/5 (No votes)

See more:

Hello everyone,

I am coding a new project which is something like blog. Simply, there is a post and a comment section. I am adding comment by posting the page. And this 'refresh' the page.

That is not good for the users. No need to refresh the page.

I am good at Mvc and C#. However, I have a little knowledge on Ajax and JS.

I made research and did some stuff. However, it does not work at all. Let me represent.

In View;

HTML

<section class="panel-footer pb0">
                                     <script type="text/javascript">
                                         $("#commentCreate").click(function (e) {
                                             e.preventDefault();
                                             alert("Here");
                                             var comment = getComment();
                                             Console.dir(comment);

                                             if (comment == null) {
                                                 alert("Specify a name please!");
                                                 return;
                                             }

                                             var json = JSON.stringify(comment);
                                             function getComment() {
                                                 var commentText = $("#CommentText").val();
                                                 var nameSurname = $("#NameSurname").val();
                                                 var email = $("#EMail").val();

                                                 return (namesurname == "") ? null : { CommentText: commentText, NameSurname: namesurname, EMail: email };

                                             $.ajax({
                                                 url: '/Blog/Comment',
                                                 type: 'POST',
                                                 dataType: 'json',
                                                 data: json,
                                                 contentType: 'application/json; charset=utf-8',
                                                 success: function (data) {
                                                     console.log(data);
                                                     $.each(data, function (i, obj) {
                                                         $("#resultMessage").html(obj.CommentText);
                                                     });
                                                 }
                                             });                                              }

                                         });
    </script>
                                <h4 class="mt0 mb15 text-primary">Yorum Yap</h4>
                             

                                <form id="deneme"  class="form-horizontal" method="post"  >
                                 
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Name <span class="text-danger">*</span></label>
                                        <div class="col-sm-9">
                                            <input type="text" name="Name" id="Name" class="form-control" >
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Email <span class="text-danger">*</span></label>
                                        <div class="col-sm-9">
                                            <input type="text" name="EMail" id="EMail" class="form-control" >
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Comment</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control" rows="6" id="CommentText" name="CommentText"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <button type="reset" class="btn btn-default">Reset</button>
                                            <button type="submit" class="btn btn-success" id="commentCreate" onclick="commentCreate()" ><span class="ladda-label">Comment</span></button>
                                        </div>
                                    </div>
                                </form>
                            </section>

In Controller

C#

[HttpPost]
      public ActionResult Comment(Comment inputModel)
      {
          if (ModelState.IsValid)
          {
             //Insert To DB
              return Json(new Comment { CommentText = "Smthng???" });
          }
          else
          {
              string errorMessage = "<div class=\"validation-summary-errors\">The following errors occurred:<ul>";
              foreach (var key in ModelState.Keys)
              {
                  var error = ModelState[key].Errors.FirstOrDefault();
                  if (error != null)
                  {
                      errorMessage += "<li class=\"field-validation-error\">" + error.ErrorMessage + "</li>";
                  }
              }
              errorMessage += "</ul>";
              return Json(new Comment { CommentText = errorMessage });
          }
      }

What is wrong with my code? What should I do? The thing that I am trying to do, is so simple but, if you don' t have enough knowledge; it becomes the most difficult thing all over the world.

Thank you.

Posted 15-Sep-15 19:51pm

FoxRoot

Updated 15-Sep-15 22:29pm

v2

Add a Solution

2 solutions

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)

F-ES Sitecore · Answer 1 · 2015-09-15T23:12:00

I tidied up the code a bit, there was nothing majorly wrong, just case issues, issues with code formatting not being valid etc. Basic debugging such as using the browser's console to check for errors and dev tools in general will have highlighted these issues.

XML

<section class="panel-footer pb0">
    <h4 class="mt0 mb15 text-primary">Yorum Yap</h4>

    <form id="deneme" class="form-horizontal" method="post">

        <div class="form-group">
            <label class="col-sm-3 control-label">Name <span class="text-danger">*</span></label>
            <div class="col-sm-9">
                <input type="text" name="Name" id="Name" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Email <span class="text-danger">*</span></label>
            <div class="col-sm-9">
                <input type="text" name="EMail" id="EMail" class="form-control">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">Comment</label>
            <div class="col-sm-9">
                <textarea class="form-control" rows="6" id="CommentText" name="CommentText"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <button type="reset" class="btn btn-default">Reset</button>
                <button type="submit" class="btn btn-success" id="commentCreate" ><span class="ladda-label">Comment</span></button>
            </div>
        </div>
    </form>
</section>
<script type="text/javascript">
    $("#commentCreate").click(function (e) {
        e.preventDefault();

        var commentText = $("#CommentText").val();
        // this element doesn't exist in your markup so I'm using "Name" instead
        //var nameSurname = $("#NameSurname").val();
        var nameSurname = $("#Name").val();
        var email = $("#EMail").val();

        // you were using nameSurname and namesurname, js is case-sensitive
        var comment = (nameSurname == "") ? null : { CommentText: commentText, NameSurname: nameSurname, EMail: email };

        if (comment == null) {
            alert("Specify a name please!");
            return;
        }

        var json = JSON.stringify(comment);

        $.ajax({
            url: '/Blog/Comment',
            type: 'POST',
            dataType: 'json',
            data: json,
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                console.log(data);
                // resultMessage doesn't exist so I've changed this to an alert
                // I also ditched the loop as you only return one object
                //$("#resultMessage").html(obj.CommentText);
                alert(data.CommentText);
            }
        });
    }); // your js wasn't valid here, you didn't have the right closing braces
</script>

Manas_Kumar · Answer 2 · 2015-09-15T21:38:00

Solution 1

I have changed in Javascript code. See below code:

JavaScript

$("#personCreate").click(function () {
	var comment= getComment();

	if (person == null) {
	   alert("Specify a name please!");
	   return;
	}

	var json = JSON.stringify(comment);

	$.ajax({
	   url: '/Blog/Comment',
	   type: 'POST',
	   dataType: 'json',
	   data: json,
	   contentType: 'application/json; charset=utf-8',
	   success: function (data) {
		// What should I do here?		
		$.each(data, function (i, obj) {
			$("#resultMessage").html(obj.CommentText);
		});
	   }
	});
});

Posted 15-Sep-15 21:38pm

Manas_Kumar

Comments

FoxRoot 16-Sep-15 3:46am

Thank you so much. But I am getting 'Uncaught TypeError: Cannot read property 'validate' of undefined'. As I got before.

[no name] 16-Sep-15 3:50am

Is that hitting your controller action?

FoxRoot 16-Sep-15 3:52am

I resolved Uncaught type error. But it does not hit controller action. Just refresh the page.

F-ES Sitecore 16-Sep-15 4:17am

$("#personCreate").click(function (e) {
e.preventDefault();
// rest of code here

FoxRoot 16-Sep-15 4:19am

Thank you. Stil just refreshs the page.

F-ES Sitecore 16-Sep-15 4:25am

You haven't shown what "personCreate" is or where it is. If you don't post all the relevant code then all people can do is guess.

FoxRoot 16-Sep-15 4:28am

I have changed personCreate to commentCreate. Let me update question. Please check the updated. I am really in trouble :/

F-ES Sitecore 16-Sep-15 4:35am

You don't need the onclick attribute, so remove

onclick="commentCreate()"

from the button. Also your getComment function simply returns null or a json object, the "return" terminates the code so your ajax call isn't being made. Use the "debugger;" keyword in conjunction with your browser dev tools (f12) to step through the code so you can see what is happening.

FoxRoot 16-Sep-15 4:47am

Thank you for your interest and patience. I am really go crazy.

Removed onclick. Ok. Chrome Console is open. No response, nothing happens.

FoxRoot 16-Sep-15 4:48am

F-ES Sitecore 16-Sep-15 4:49am

Do you get the "Here" alert?

FoxRoot 16-Sep-15 6:16am

No :/

[no name] 16-Sep-15 3:59am

Looks like person object is null. Recheck it.

FoxRoot 16-Sep-15 4:01am

Stil refresh the page. Does not hit to controller action.

<form class="form-horizontal" id="getComment">
<script type="text/javascript">
$("#personCreate").click(function () {
var comment = getComment();
function getComment() {
var commentText = $("#CommentText").val();
var nameSurname = $("#NameSurname").val();
var email = $("#EMail").val();

return (namesurname == "") ? null : { CommentText: commentText, NameSurname: namesurname, EMail: email };
}
Console.dir(comment);

if (person == null) {
alert("Specify a name please!");
return;
}

var json = JSON.stringify(comment);

$.ajax({
url: '/Blog/Comment',
type: 'POST',
dataType: 'json',
data: json,
contentType: 'application/json; charset=utf-8',
success: function (data) {
console.log(data);
$.each(data, function (i, obj) {
$("#resultMessage").html(obj.CommentText);
});
}
});

});
</script>
<div class="form-group">
<label class="col-sm-3 control-label">Ad Soyad <span class="text-danger">*</span></label>
<div class="col-sm-9">
<input type="text" name="AdSoyad" id="AdSoyad" class="form-control" >
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email <span class="text-danger">*</span></label>
<div class="col-sm-9">
<input type="text" name="EMail" id="EMail" class="form-control" >
</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">Yorumunuz</label>
<div class="col-sm-9">
<textarea class="form-control" rows="6" name="CommentText"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">