Question

由于我是网络编程的新手，我坚持使用相当常见的用例。为了简单起见，我将使用Invoice示例。输入发票时，我可以从DropDownList中选择现有客户。但如果客户不存在，我必须创建它，然后选择它。当然，我可以导航到客户，添加一个新客户，然后回到发票，从开始开始，但这肯定不是一个方法。我确信有某种“最佳实践”的方式来处理它，而发票可能有一个很长的输入形式，有很多相关的记录，并且失去了填充的字段是不可能的。

在WPF中我会使用模态视图。据说可以在这里使用相同的方法，但我没有找到类似的例子可能使用错误的术语。

我知道jQuery / javascript是一种可行的方式，但现在仍然不会是'最佳实践'看起来相似。此外，是否有一些很好的UI方法可以让没有javascript的输入？

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

Answer 1

我认为最好的方法是使用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();
        });
    }

如何在表格上添加/编辑相关实体

1 个答案: