显示

Question

我在javascript中非常糟糕，jquery..i必须创建一个页面，其中课程将分配给教师，如果教师的剩余学分低于分配给教师的课程学分，则会打开一个对话框如果没有被选中，那么对话框将关闭无效，如果是，那么该课程将分配给老师，老师的剩余学分将变为减去。我的对话框在显示后立即关闭而且我也不知道如果选择是，那么将在数据库中插入值，请帮忙 这是我的对话框代码...

 $("#submit").click(function () {
                var courseCredit = $("#courseCredit").val();
                var remainingCredit = $("#remainingCredit").val();
                if (remainingCredit < courseCredit) {
                    //var dialog = $("#dialog");
                    $('<div title="Confirm Box"></div>').dialog({
                        open: function (event, ui) {
                            $(this).html("Yes or No question?");
                        },
                        autoOpen:true,
                        resizable: false,
                        width:'auto',
                        modal: true,
                        buttons: {
                            'Yes': function () {
                                $(this).dialog('close');
                            },
                            'No': function () {
                                $(this).dialog('close');
                            }
                        },
                        close: function (event,ui) {
                            $(this).remove();
                        }
                    });

                }


            });

这是HTML代码......

  <form method="POST">
            <table>
                <tr>
                    <td>
                        <label>Department</label>
                        <select name="departmentId" id="departmentId">
                            <option value="">Select...</option>
                            @foreach (var department in departments)
                            {
                                <option value="@department.DepartmentId">@department.DepartmentName</option>
                            }
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Teacher</label>
                        <select name="teacherId" id="teacherId">
                            <option value="0">Select...</option>
                        </select>

                    </td>
                </tr>

                <tr>
                    <td>
                        <label>Credit to be taken</label>
                        @*@Html.TextBoxFor(d=>d.)*@
                        <input type="text" name="creditTaken" id="creditTaken" readonly value="@Model.CreditTaken" />

                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Remaining Credit</label>
                        <input type="text" name="remainingCredit" id="remainingCredit" readonly value="@Model.RemainingCredit" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Course Code</label>
                        <select name="courseId" id="courseId"></select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Name</label>
                        <input type="text" name="courseName" id="courseName" readonly />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Credit</label>
                        <input type="email" name="courseCredit" id="courseCredit" readonly />
                    </td>
                </tr>

                <tr>
                    <td>
                        <input type="submit" name="submit" id="submit" value="Assign"/>
                    </td>
                </tr>
                <tr>

                    <td>
                        @if (ViewBag.ValidationMsg != null)
                        {
                            <p>@ViewBag.ValidationMsg</p>
                        }
                    </td>
                </tr>
            </table>

        </form>

...控制器

 public ActionResult CourseAssign(CourseAssign courseAssign)
    {

        var departments = _departmentManager.GetAllDepartments();

        ViewBag.Departments = departments;


            courseAssign.RemainingCredit = courseAssign.RemainingCredit - courseAssign.CourseCredit;
            int rowAffected = _teacherManager.InsertCourseAssign(courseAssign);

            if (rowAffected > 0)
            {
                ViewBag.ValidationMsg = "Successfull.";
                return View(courseAssign);
            }
            ViewBag.ValidationMsg = "This course is already assigned.";
            return View(courseAssign);
        //}
        //ViewBag.Checkmsg = "This course is already assigned.";
        //return View(courseAssign);
    }

Answer 1

从我在代码中看到的问题来看，问题依赖于$（＆＃34;＃submit＆＃34;）按钮点击。单击提交按钮后，您将看到弹出窗口，但页面将POST到您的控制器，这会导致页面重新加载（因此您将丢失弹出窗口）。

我建议将提交按钮的类型更改为＆＃34;按钮＆＃34;这将阻止POST。

然后在您的表单中添加一个ID，因此在您的javascript代码中，您可以根据需要使用以下说明提交表单：$（＆＃34; #formid＆＃34;）。submit（）;

所以你的代码可能是这样的：

 $("#submit").click(function () {
            var courseCredit = $("#courseCredit").val();
            var remainingCredit = $("#remainingCredit").val();
            if (remainingCredit < courseCredit) {
                //var dialog = $("#dialog");
                $('<div title="Confirm Box"></div>').dialog({
                    open: function (event, ui) {
                        $(this).html("Yes or No question?");
                    },
                    autoOpen:true,
                    resizable: false,
                    width:'auto',
                    modal: true,
                    buttons: {
                        'Yes': function () {
                            $("#formid").submit(); // submit to save in db
                        },
                        'No': function () {
                            $(this).dialog('close');
                        }
                    },
                    close: function (event,ui) {
                        $(this).remove();
                    }
                });

            }
        });

你的html就像：

<form method="POST" id="formid">
        <table>
            <tr>
                <td>
                    <label>Department</label>
                    <select name="departmentId" id="departmentId">
                        <option value="">Select...</option>
                        @foreach (var department in departments)
                        {
                            <option value="@department.DepartmentId">@department.DepartmentName</option>
                        }
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Teacher</label>
                    <select name="teacherId" id="teacherId">
                        <option value="0">Select...</option>
                    </select>

                </td>
            </tr>

            <tr>
                <td>
                    <label>Credit to be taken</label>
                    @*@Html.TextBoxFor(d=>d.)*@
                    <input type="text" name="creditTaken" id="creditTaken" readonly value="@Model.CreditTaken" />

                </td>
            </tr>
            <tr>
                <td>
                    <label>Remaining Credit</label>
                    <input type="text" name="remainingCredit" id="remainingCredit" readonly value="@Model.RemainingCredit" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Course Code</label>
                    <select name="courseId" id="courseId"></select>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Name</label>
                    <input type="text" name="courseName" id="courseName" readonly />
                </td>
            </tr>
            <tr>
                <td>
                    <label>Credit</label>
                    <input type="email" name="courseCredit" id="courseCredit" readonly />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="button" name="submit" id="submit" value="Assign"/>
                </td>
            </tr>
            <tr>

                <td>
                    @if (ViewBag.ValidationMsg != null)
                    {
                        <p>@ViewBag.ValidationMsg</p>
                    }
                </td>
            </tr>
        </table>

    </form>

希望这有帮助！