如何在表单中添加/编辑相关实体

本文关键字：编辑 实体 添加 表单 | 更新日期: 2023-09-27 18:29:47

作为Web编程的新手，我遇到了一个非常常见的用例。为了简单起见，我将使用Invoice示例。在输入发票时，我可以从下拉列表中选择现有客户。但如果客户不存在，我必须创建它，然后选择它。当然，我可以导航到客户，添加新客户，然后回到发票，从头开始，但这肯定不是一条路。我相信有某种"最佳实践"的方法来处理它，因为发票可能是一个长的输入表单，其中有许多重新分配的记录，丢失填充的字段是不可能的。

在WPF中，我会使用模态视图。假设这里可以使用相同的方法，但我还没有发现类似的例子，可能使用了错误的术语。

我知道jQuery/javascript还有一段路要走，但现在还不知道什么是"最佳实践"。此外，有没有一些好的UI技巧可以让类似的输入在没有javascript的情况下进行？

有人能把我转向正确的方向，让我从太多的猜测中解脱出来吗？

如何在表单中添加/编辑相关实体

我认为最好的方法是使用jquery

创建对话框表单并在新客户上显示btn点击并使用ajax保存它，并在成功时使用另一个调用的ajax将数据加载到下拉列表

1） 对话框

<div class="modal fade" id="dialog-AddPublishers" style="display: none !important;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Add Publisher</h4>
        </div>
        <form role="form" id="frmAddPublishers">
            <div class="col-lg-12">
                <div class="form-group LeftPadding10px">
                    <label for="Product">Publishers Name</label>
                    <input type="text" name="PublishersName" id="PublishersName" class="form-control InputBoxWidth autosuggest" placeholder="Enter Publishers Name">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" onclick="SavePublishers()" class="btn btn-primary" id="btnAdd">Save Publishers</button>
                </div>
            </div>
        </form>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

2） 点击事件

function ShowAddPublishers() {
        $("#dialog-AddPublishers").modal('show');
        $('#PublishersName').val('');
    };

3） ajax调用

 function SavePublishers() {
        var pathName = window.location.pathname;
        var virtualdir = pathName.split('/');
        var directory = "/" + virtualdir[1] + "/ManageLibrary/ManagePublisher/AddPublisherJsonData";

        $.ajax({
            url: directory,
            type: "post",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify
                ({
                    PublishersName: $('#PublishersName').val(),
                }),
            success: function (data) {
                //$("#dialog-AddPublishers").show().delay(3000).queue(function (n) {
                //    $(this).hide(); n();
                //    $('#PublishersID').focus();
                //});
                $("#dialog-AddPublishers").modal('hide');
                BindPublishers();
            },
            error: function (data) {
                $("#result").html('There is error while submit');
            }
        });
    }

4） 重新绑定下拉列表

function BindPublishers() {
        var pathName = window.location.pathname;
        var virtualdir = pathName.split('/');
        var directory = "/" + virtualdir[1] + "/ManageLibrary/ManagePublisher/GetPublisherJsonList";
        $.getJSON(directory, null, function (data) {
            $('#PublishersID').empty();
            $('#PublishersID').append($('<option></option>').text('None').attr('value', ''));
            for (i = 0; i < data.length; i++) {
                $('#PublishersID').append($('<option></option>').text(data[i].PublishersName).attr('value', data[i].PublishersID));
            }
        }).done(function () {
            $('#PublishersID').focus();
        });
    }
相关文章：