如何将数据从 jquery 代码传递到我的项目后端

Posted

技术标签:

【中文标题】如何将数据从 jquery 代码传递到我的项目后端【英文标题】：How can I passing data from jquery codes to my project backend 【发布时间】：2021-10-24 10:29:25 【问题描述】：

我确实在我的网站中创建了一个表单和一个提交按钮

但我不知道如何将数据从 javascript 代码传递到我的 asp.net 核心代码

我的 html jquery css 代码在这里：

*
    box-sizing: border-box;

body
    padding:20px 25px 70px 25px;

#all-questions-preview>.content
    display: flex;
    flex-direction: column;

#all-questions-preview>.content>.question-container
    width:100%;
    background: #fefefe;
    border-radius: 8px;
    box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);
    padding:12px 18px 70px 18px;
    position: relative;
    margin-bottom:15px;


#all-questions-preview>.content>.question-container>.question-title
    color: #444;
    font-weight: bold;

#all-questions-preview>.content>.question-container>.question-title::before
    content: ":.";


#all-questions-preview>.content>.question-container>.close
    position:absolute;
    padding:5px;
    color: #f02f24;
    font-size: 1.3em;
    font-weight: bold;
    transform: rotate(45deg);
    top:10px;
    right:10px;
    background-color:#f6f6f6;
    border:none !important;
    outline: none !important;
    cursor:pointer;
    border-radius:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;


#all-questions-preview>.content>.question-container input
    background: none !important;
    outline: none !important;
    border:none;
    font-weight: bold;


#all-questions-preview>.content>.question-container .question-sentence
    display:inline-block;
    width:100%;
    font-size:1.2em;
    padding:5px 10px;
    border-bottom:2px solid #71c9db;
    color: #61adbb;

#all-questions-preview>.content>.question-container .answer-span
    display:inline-block;
    margin-right:20px;
    margin-top:20px;
    width:20%;
    min-width: 150px;
    position: relative;
    /*text-align: right;*/
    /*border:1px solid red;*/

#all-questions-preview>.content>.question-container .answer-input
    display:inline-block;
    padding:5px 10px;
    border-bottom:2px solid #e171ae;
    color: #be3e89;
    width:calc(100% - 50px)

#all-questions-preview>.content>.question-container .answer-span .close
    position:absolute;
    padding:5px;
    color: #f02f24;
    font-size: 1.2em;
    transform: rotate(45deg);
    top:15px;
    right:22px;
    background-color:transparent;
    border:none !important;
    outline: none !important;
    cursor:pointer;
    border-radius:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;


#all-questions-preview>.content>.question-container .add-answer
    display: inline-block;
    margin-top:15px;
    background-color: rgba(243, 200, 86, 0.48);
    border:2px solid rgb(221, 177, 84);
    color: rgb(153, 122, 58);
    padding:10px 20px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    right:15px;
    bottom:10px;

#all-questions-preview> .add-question
    display: inline-block;
    background-color: rgba(60, 243, 71, 0.48);
    border:2px solid rgb(69, 198, 59);
    color: rgb(32, 114, 31);
    padding:10px 20px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    margin-top: -62px;
    margin-left:10px;
    font-weight: bold;


#all-questions-preview> .submit
    display: block;
    width:90%;
    margin:15px auto 15px auto;

    background-color: rgba(74, 148, 243, 0.48);
    border:2px solid rgb(74, 148, 243);
    color: rgb(39, 77, 127);
    padding:15px 20px;
    font-weight: bold;
    box-shadow: 0 5px 5px 1px rgba(61, 122, 200, 0.5);
    border-radius: 5px;
    cursor: pointer;



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="content">
        <form action="#" method="post" id="all-questions-preview">
            <div class="content">
            </div>
            <button class="add-question" type="button">Add new question</button>
            <br>
            <button type="submit" class="submit">Submit</button>
        </form>
        <form action="test.php" id="all-questions-main" method="post" style="display: none">
            <input type="hidden" name="data" id="questions-data">
        </form>
    </div>
    <script>
        $(document).ready(function() 
            createQuestion($('#all-questions-preview')); //default one question added
            $('#all-questions-preview').on('submit', previewFormSubmit);
            $('#all-questions-preview .add-question').on('click', addQuestion);

        );

        function previewFormSubmit(ev) 
            ev.preventDefault();
            let data = [];
            getQuestions($(this)).each(function() 
                let question = $(this);
                let question_data = ;
                question_data['question_sentence'] = question.find('.question-sentence').eq(0).val();
                let question_answers = [];
                getAnswers(question).each(function() 
                    let answer = $(this);
                    let answer_input = answer.find('.answer-input').val();
                    if (answer_input.trim() !== "") 
                        question_answers.push(answer_input)
                    
                );
                question_data['question_answers'] = question_answers;
                data.push(question_data);
            );
            $('#all-questions-main>#questions-data').val(JSON.stringify(data));
            $('#all-questions-main')[0].submit();
        


        function addAnswer(event) 

            let question_container = $(this).parents('.question-container').eq(0);
            createAnswer(question_container);
        

        function createAnswer(question_container) 
            let answers = getAnswers(question_container);
            let answer_span = $("<span>").addClass('answer-span');
            let closeBtn = null;
            if (answers.length > 0) 
                closeBtn = $("<button>").attr(
                    type: 'button',
                    class: 'close'
                ).text('+').on('click', deleteAnswer);
            
            let answer_input = $("<input>").addClass('answer-input').attr(
                type: 'text',
                name: 'answer',
                placeholder: 'answer' + (answers.length + 1)
            );
            if (answers.length === 0) 
                answer_input.attr('required', 'required')
            
            let container_answers = question_container.find('.answers-container').eq(0);
            answer_span.append(closeBtn, answer_input);
            container_answers.append(answer_span);
            return answer_span;
        

        function getAnswers(question_container) 
            return (question_container.find(".answers-container .answer-span"));

        


        function addQuestion(event) 
            let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
            createQuestion(all_questions_form);
        

        function getQuestions(all_question_form) 
            return (all_question_form.find('.question-container'));
        

        function createQuestion(all_questions_form) 
            let all_questions_form_content = all_questions_form.find(">.content").eq(0);
            let questions = getQuestions(all_questions_form);
            let new_question = $("<div>").addClass('question-container');
            let question_title = $("<h4>").addClass('question-title').text('Question number' + (questions.length + 1));
            let closeBtn = null;
            if (questions.length > 0) 
                closeBtn = $("<button>").attr(
                    type: 'button',
                    class: 'close'
                ).text('+').on('click', deleteQuestion);
            
            let question_sentence = $("<input>").addClass('question-sentence').attr(
                type: 'text',
                name: 'question_sentence',
                placeholder: 'question' + (questions.length + 1),
                required: 'required'
            );
            let container_answers = $("<div>").addClass('answers-container');
            let add_answer_btn = $("<button>").addClass('add-answer').attr('type', 'button').text('Add answer').on('click', addAnswer);

            new_question.append(question_title, closeBtn, question_sentence, container_answers, add_answer_btn);
            all_questions_form_content.append(new_question);
            createAnswer(new_question);
            return new_question;
        


        function deleteQuestion() 
            let question_container = $(this).parents('.question-container').eq(0);
            let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
            let questions = getQuestions(all_questions_form);
            if (questions.index(question_container) !== 0) 
                question_container.fadeOut(200, function() 
                    $(this).remove();
                )
            
        

        function deleteAnswer() 
            let question_container = $(this).parents('.question-container').eq(0);
            let answer_span = $(this).parents('.answer-span').eq(0);
            let all_questions_form = $(this).parents("#all-questions-preview").eq(0);
            let answers = getAnswers(question_container);
            if (answers.index(answer_span) !== 0) 
                answer_span.fadeOut(200, function() 
                    $(this).remove();
                )
            
        
    </script>



</body>

</html>

实际上我希望当用户点击提交按钮时数据传递给 Asp.net 核心代码

请帮帮我，我已经参与这个问题好几天了

谢谢

【问题讨论】：

如果我的回复有帮助，请采纳为答案（点击回复旁边的标记选项将其从灰色切换为填写。），请参阅meta.stackexchange.com/questions/5234/… 【参考方案1】：

绑定模型不会发生在您的 HTML 中，该模型通过 submit 发送到操作方法。您可以使用 Ajax 传输数组问题和答案。

【讨论】：

【参考方案2】：

我找到了你无法在后端代码中获取模型的原因。

因为你传递的数据是字符串格式，所以我们可以安装Newtonsoft.Json库。并将字符串反序列化为对象。

public class list_questions  
    public string question_sentence  get; set; 
    public List<string> question_answers  get; set;

步骤

在您的 .cshtml 中，您的代码应如下所示。

 <form action="/ForTest/get_data" id="all-questions-main" method="post" style="display: none">
    <input type="hidden" name="data" id="questions-data">
 </form>

我的/ForTest/get_data 方法

我的测试结果

【讨论】：

以上是关于如何将数据从 jquery 代码传递到我的项目后端的主要内容，如果未能解决你的问题，请参考以下文章

如何将值从反应本机应用程序传递到节点 js 后端

使用 jQuery 将表单数据作为数组传递给 Laravel

使用 JavaScript 和 Jquery 在下拉列表中显示后端数据

从 JQUERY 传递数据 | AJAX 处理 ASP.NET

数据从 AJAX 调用传递到控制器但获取空值

POST 参数不是从我的反向代理传递到我的后端服务器