jquery 使用 AJAX 将数据插入数据库(ASP.NETMVC)

daolsyd0  于 2022-11-03  发布在  jQuery
关注(0)|答案(2)|浏览(246)

我有问题1-问题10的表
以下是表语法

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,

此外,我还为这些问题提供了下拉列表
这是它的样子
第一次
我需要在按钮上点击从下拉列表中获取数据,并在数据库中写入Question 1-Question 10行。
这是我的控制器

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

这是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>

我认为 AJAX 可以做到这一点,但我需要如何编写代码或在哪里我可以写如何做到这一点?
谢谢

更新

感谢Prasanna Kumar J的回答
我还有一个问题
我编写函数并尝试通过单击按钮来运行它。

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

而这个在JS

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

但函数没有在按钮上运行。错误在哪里?

avwztpqn

avwztpqn1#

试试这个。在客户端

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

在服务器端

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

bweufnob2#

您使用的是ASP .NETMVC,因此在问题控制器中,可以创建一个[HttpPost]方法来处理数据库更新。
如果您使用的是SQL Server,则可以使用System.Data.SqlClient命名空间中的类,并查看MSDN文档中的示例。
如果您使用的是MySQL,则可以使用MySQL .NET连接器-on their site(包括documentation)提供的信息。
在数据库更新方法中,您可以使用UPDATEINSERT查询来更新数据库中的数据。要检索信息,请使用<form method="post" action="your_update_page"><input type="submit" />。这将发布输入字段中包含的信息(所需的名称相当于更新方法中的参数),以便在触发时由后端控制器访问以进行数据库更新。

相关问题