Question

我尝试使用jQuery动态添加表单字段并将输入保存在我的数据库中。除了textarea之外，所有字段都保存到数据库中。我不确定问题是什么。

查看

@model DailyTaskList.Models.DTL_Tasks

@{
var db = new DailyTaskList.Models.DailyTaskListEntities();
var options = db.DTL_UserOptions.Where(u => u.UserProfile.UserId == WebMatrix.WebData.WebSecurity.CurrentUserId);
var priority = db.DTL_Tasks.Select(p => p.Priority).FirstOrDefault();
var customerNames = db.DTL_Customers.Select(c => c.CustomerName);
var userSelectedTasks = options.Select(o => o.DTL_TaskTypes);


SelectList userSelectedTasksList = new SelectList(userSelectedTasks);
var priorityListItems = new SelectListItem[] {
    new SelectListItem(){ Text="", Value="0" },
    new SelectListItem(){ Text="Low", Value="1" },
    new SelectListItem(){ Text="Medium", Value="2" },
    new SelectListItem(){ Text="High", Value="3" },
    new SelectListItem(){ Text="Highest", Value="4" }
};

using (Html.BeginForm("Index", "NewTask", FormMethod.Post, new { id = "new-task-form" })) {
@Html.ValidationSummary(true)

    // Original form fields
    <div class="new-task-form-wrapper">
        <div class="form-group">
            <label>Customer:</label>
            @Html.DropDownListFor(model => model.CustomerId, new SelectList(db.DTL_Customers, "CustomerId", "CustomerName"), new { @class = "form-control", id = "Customer_0" })
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-10">
                    <label>Activity:</label>
                    @Html.DropDownListFor(model => model.TaskTypeId, new SelectList(userSelectedTasks, "TaskTypeId", "TaskName"), new { @class = "form-control", id = "Activity_0" })
                </div>
                <div class="col-sm-2">
                    <label>Priority:</label>
                    @Html.DropDownListFor(model => model.Priority, priorityListItems, new { @class = "form-control", id = "Priority_0" })
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>Title:</label>
            @Html.TextBoxFor(model => model.TaskTitle, new { @class = "form-control", id = "Title_0" })
        </div>
        <div class="form-group description">
            <label>Description:</label>
            @Html.TextAreaFor(model => model.TaskDescription, new { @class = "form-control", id = "Description_0" })
        </div>
    </div>

    // Additional form fields
    <div id="additional-form-fields_0" class="hide new-task-form-wrapper">
        <div class="form-group">
            <label>Customer:</label>
            @Html.DropDownListFor(model => model.CustomerId, new SelectList(db.DTL_Customers, "CustomerId", "CustomerName"), new { @class = "form-control", id = "Customer_1" })
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-10">
                    <label>Activity:</label>
                    @Html.DropDownListFor(model => model.TaskTypeId, new SelectList(userSelectedTasks, "TaskTypeId", "TaskName"), new { @class = "form-control", id = "Activity_1" })
                </div>
                <div class="col-sm-2">
                    <label>Priority:</label>
                    @Html.DropDownListFor(model => model.Priority, priorityListItems, new { @class = "form-control", id = "Priority_1" })
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>Title:</label>
            @Html.TextBoxFor(model => model.TaskTitle, new { @class = "form-control", id = "Title_1" })
        </div>
        <div class="form-group description">
            <label>Description:</label>
            @Html.TextAreaFor(model => model.TaskDescription, new { @class = "form-control", id = "Description_1" })
        </div>
    </div>

    // Form controls
    <div class="form-group">
        <button type="submit" class="btn btn-default" value="Create">Submit</button>
        <div class="btn btn-default" id="addnew">+</div>
        @*<div class="btn btn-default" id="remove">-</div>*@
    </div>
  }
}

脚本

$(document).ready(function () {

    CKEDITOR.replace('Description_0');

    var counter = 0;
    var additionalFormFields = $("#additional-form-fields_" + String(counter));
    var customerInput = $("#Customer_1"),
        activityInput = $("#Activity_1"),
        priorityInput = $("#Priority_1"),
        titleInput = $("#Title_1"),
        descriptionInput = $("#Description_1");

    $('#addnew').click(function () {

        if (counter == 0) {
            additionalFormFields.removeClass("hide");
        }
        else {
            var newFormFields = additionalFormFields.clone();
            additionalFormFields.after(newFormFields);
        }
        additionalFormFields.attr("id", "additional-form-fields_" + String(counter));

        customerInput.attr("id", "Customer_" + String(counter + 1));
        customerInput.attr("name", "CustomerId_" + String(counter));

        activityInput.attr("id", "Activity_" + String(counter + 1));
        activityInput.attr("name", "TaskTypeId_" + String(counter));

        priorityInput.attr("id", "Priority_" + String(counter + 1));
        priorityInput.attr("name", "Priority_" + String(counter));

        titleInput.attr("id", "Title_" + String(counter + 1));
        titleInput.attr("name", "TaskTitle_" + String(counter));

        descriptionInput.attr("id", "Description_" + String(counter + 1));
        descriptionInput.attr("name", "DescriptionId_" + String(counter));

        counter++;
        return false;
    });

    $('#new-task-form').on('submit', function (e) {
        e.preventDefault();

        var data = [];

        $.each($(".new-task-form-wrapper"), function (i, o) {
            data.push({
                CustomerId: $(this).find("select[name^='CustomerId']").val(),
                TaskTypeId: $(this).find("select[name^='TaskTypeId']").val(),
                Priority: $(this).find("select[name^='Priority']").val(),
                TaskTitle: $(this).find("input[name^='TaskTitle']").val(),
                TaskDescription: $(this).find("textarea[name^='DescriptionId']").val()
            });
        });

        $.ajax({
            url: 'NewTask/Index',
            type: 'POST',
            dataType: "json",
            contentType: 'application/json',
            data: JSON.stringify(data)
        });
    });
});

Answer 1

嗯，您的文字区域名称为TaskDescription，因此选择器更合适：

TaskDescription: $(this).find("textarea[name^='TaskDescription']").val()

Textarea不会使用jQuery保存到数据库

1 个答案: