Insert data to database using AJAX (ASP.NET MVC )

Question

I have table with Question1 - Question10

Here is table syntax

CREATE TABLE [dbo].[QuestionBlocks] (
[Block_ID]     INT            IDENTITY (1, 1) NOT NULL,
[Question1]    NVARCHAR (MAX) NULL,
[Question2]    NVARCHAR (MAX) NULL,
[Question3]    NVARCHAR (MAX) NULL,
[Question4]    NVARCHAR (MAX) NULL,
[Question5]    NVARCHAR (MAX) NULL,
[Question6]    NVARCHAR (MAX) NULL,
[Question7]    NVARCHAR (MAX) NULL,
[Question8]    NVARCHAR (MAX) NULL,
[Question9]    NVARCHAR (MAX) NULL,
[Question10]   NVARCHAR (MAX) NULL,

Also I have DropDownLists for those questions

Here is it's looks like

I need on button click get data from DropdownLists and write Question1-Question10 rows in Database.

Here is My Controller

public ActionResult Index()
    {
        ViewBag.Question1 = new  SelectList(db.Questions,"QuestionId","question");
        ViewBag.Question2 = new SelectList(db.Questions, "QuestionId", "question");
        ViewBag.Question3 = new SelectList(db.Questions, "QuestionId", "question");
        ViewBag.Question4 = new SelectList(db.Questions, "QuestionId", "question");
        ViewBag.Question5 = new SelectList(db.Questions, "QuestionId", "question");
        ViewBag.Question6 = new SelectList(db.Questions, "QuestionId", "question");
        ViewBag.Question7 = new SelectList(db.Questions, "QuestionId", "question");
        ViewBag.Question8 = new SelectList(db.Questions, "QuestionId", "question");
        ViewBag.Question9 = new SelectList(db.Questions, "QuestionId", "question");
        ViewBag.Question10 = new SelectList(db.Questions, "QuestionId", "question");

        return View(db.Questions.ToList());
    }

And here is View

  <div class="title2" style="margin-top: 15px; margin-left: 15px; margin-bottom: 15px; padding-top: 10px">
                @Html.DropDownList("Question1", null, "Вопрос 1", htmlAttributes: new {@class = "form-control", @style = "height:40px;margin-bottom: 20px;",placeholder="lol"})
                @Html.DropDownList("Question2", null, "Вопрос 2", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
                @Html.DropDownList("Question3", null, "Вопрос 3", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
                @Html.DropDownList("Question4", null, "Вопрос 4", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
                @Html.DropDownList("Question5", null, "Вопрос 5", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
                @Html.DropDownList("Question6", null, "Вопрос 6", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
                @Html.DropDownList("Question7", null, "Вопрос 7", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
                @Html.DropDownList("Question8", null, "Вопрос 8", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
                @Html.DropDownList("Question9", null, "Вопрос 9", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
                @Html.DropDownList("Question10", null, "Вопрос 10", htmlAttributes: new {@class = "form-control", @style = "height:40px; margin-bottom: 20px;"})
            </div>

I think AJAX can do this, but how I need to write code or where I can write about how to do this?

Thank's

UPDATE

Thank's Prasanna Kumar J for answer

I have one more question

I write function and try to run it by button click I write this code in html

<input id="save" type="button" value="Save" onclick="save();"/>

And this in JS

$(document).ready(function () {
    $('#save').click(function () {
        save();
    });
});

But function doesn't run on button. Where is error?

Yes get values from dropdownLists and post to table@PrasannaKumarJ — , Mar 21 '17 at 10:27
The problem is your model is not bound to the fields and that's why the answers bellow try to use plain html to retrieve values by post and asp.net instead of MVC Razor. If you just Google for a full example on how to bind your model in MVC you'll get a clean solution. — derloopkat, Mar 21 '17 at 11:25

score 0 · Answer 1 · edited Mar 21 '17 at 11:32

0

You're using ASP.NET MVC, so in your questions controller, you can create a [HttpPost] method to handle database updates.

If you're using SQL Server, you can use the classes in the System.Data.SqlClient namespaces and take a look at MSDN documentation with examples.

If you're using MySQL, you can use the MySQL .NET Connector - information available on their site including documentation.

In the database update method, you can use an UPDATE or INSERT query to update the data in the database. To retreive the information, have a <form method="post" action="your_update_page"> and a <input type="submit" />. This will post the information contained within input fields (with required names equivalent to parameters in update method) to be accessed by your back-end controller to make database updates when triggered.

edited Mar 21 '17 at 11:32

marc_s

732,580
175
1,330
1,459

answered Mar 21 '17 at 10:32

Nathangrad

1,426
10
25

Razor should be generating the html form using helper Html.BeginForm and then you just receive the model as parameter in the controller when page is posted. Don't even need to specify httppost as that's the default. – derloopkat Mar 21 '17 at 10:37
There are lots of ways to go about this. Razor can generate the form if needed and there's plenty of documentation for it at https://msdn.microsoft.com/en-us/library/system.web.mvc.html.formextensions.beginform(v=vs.118).aspx – Nathangrad Mar 21 '17 at 10:40

Prasanna Kumar J · Answer 2 · 2017-03-21T11:14:31.863

0

Try this. In Client Side

function save()
{
 $.ajax({
            type: 'Post',
            dataType: 'Json',
            data: { question1: $('#question1').val(),
                    question2: $('#question2').val(),
                    question3: $('#question3').val(),
                    question4: $('#question4').val(),
                    question5: $('#question5').val(),
                    question6: $('#question6').val(),
                    question7: $('#question7').val(),
                    question8: $('#question8').val(),
                    question9: $('#question9').val(),
                    question10: $('#question10').val()
            },
            url: '@Url.Action("SaveAction", "SaveController")',
            success: function (da) {
                if (da.Result == "Success") {
                 alert('saved sucessfully')


                } else {

                    alert( 'Error'+ da.Message);
                }
            },
            error: function (da) {
                alert('Error');
            }
        });
}

In server Side

  [httppost]
  public ActionResult SaveAction(string question1,string question2,string question3,.....,string question10)
  {
        //do something
 return Json(new { Result = "Success", Message = "Saved Successfully" }, JsonRequestBehavior.AllowGet);
  }

edited Mar 21 '17 at 11:14

answered Mar 21 '17 at 10:40

Prasanna Kumar J

1,288
3
17
35

So I can make collection on server side like this? `QuestionBlock question = new QuestionBlock { Question1 = question1, Question2 = question2, Question3 = question3 // … };` – Mar 21 '17 at 11:47
provide correct controller name.what is your controller name? – Prasanna Kumar J Mar 21 '17 at 12:18
`url: '@Url.Action("Index", "Questions")` write like this Controller is `Questions` – Mar 21 '17 at 12:20
try like this in server side saveaction(string question1,string question2,string question3,.....,string question10) – Prasanna Kumar J Mar 21 '17 at 12:22
have this `Failed to load resource: the server responded with a status of 500 (Internal Server Error)` and controller name – Mar 21 '17 at 12:24
this problem occured by incorrect passing no. of parameter or invalid datatype passed to server – Prasanna Kumar J Mar 21 '17 at 12:29
url: '@Url.Action("Index", "Questions") index action is wrong change to url: '@Url.Action("SaveAction", "Questions") – Prasanna Kumar J Mar 21 '17 at 12:41
all ok, new Entry is created. but it create id and not enter questions – Mar 21 '17 at 13:30

Insert data to database using AJAX (ASP.NET MVC )

2 Answers2