ASP.NET用HTML表单和发送，发布，获取，ajax的东西

Question

我不知道我应该从哪里开始，我有一些问题和一些我发现的愚蠢的解决方案，而且我没有足够的英语来解释自己）： 首先，我只知道带有c＃的asp.net web表单并与他们一起编写项目，但我不知道为什么我讨厌asp elmenets以及它的回发等等......

因为我尝试使用html元素，当然一些问题又开始了，这些是我想要问的点，然后学习。

我将在下面分享一些代码，我想了解这些是正确的方法。

首先，在页面中有一些selected change或一些列表click我必须更改一些列表等...即使我使用form submit而不使用{ {1}}代码。

在这个示例中，我有一个列表，其中包含按钮并单击它们（<form>），它填充了数据表（＆＃39;＃table_codes＆＃39;）项目。

HTML

'.codes'

C＃

<!--buttons-->
 <div class="btn-group">
    <button type="button" class="btn btn-default codes" data-code="01"><%=GetLocalResourceObject("Code.Text") %> 1</button>
    <button type="button" class="btn btn-default codes" data-code="02"><%=GetLocalResourceObject("Code.Text") %> 2</button>
    <button type="button" class="btn btn-default codes" data-code="03"><%=GetLocalResourceObject("Code.Text") %> 3</button>
    <button type="button" class="btn btn-default codes" data-code="04"><%=GetLocalResourceObject("Code.Text") %> 4</button>
    <button type="button" class="btn btn-default codes" data-code="05"><%=GetLocalResourceObject("Code.Text") %> 5</button>
    <button type="button" class="btn btn-default codes" data-code="06"><%=GetLocalResourceObject("Code.Text") %> 6</button>
    <button type="button" class="btn btn-default codes" data-code="07"><%=GetLocalResourceObject("Code.Text") %> 7</button>
    <button type="button" class="btn btn-default codes" data-code="08"><%=GetLocalResourceObject("Code.Text") %> 8</button>
    <button type="button" class="btn btn-default codes" data-code="09"><%=GetLocalResourceObject("Code.Text") %> 9</button>
    <button type="button" class="btn btn-default codes" data-code="10"><%=GetLocalResourceObject("Code.Text") %> 10</button>
</div>

<!--datatable-->
<table class="table table-striped table-bordered table-advance table-hover" id="table_codes">
    <thead>
        <tr>
            <th>
                <i class="fa fa-reorder"></i>&nbsp;<%=GetLocalResourceObject("CodeName.Text") %>
            </th>
            <th class="col-md-1">
                <a class="btn default btn-xs green modal-add display-hide" href="#add-code" data-toggle="modal">&nbsp;<i class="fa fa-plus"></i>&nbsp;<%=GetLocalResourceObject("BtnAdd.Text") %></a>
            </th>
            <th class="col-md-1">&nbsp;
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="3"><%=GetLocalResourceObject("Empty.Text") %></td>
        </tr>
    </tbody>
</table>


//Javascript
$(document).on('click', '.btn.codes', function () {
    var $code = $(this).attr('data-code');
              $.ajax({
                type: "POST",
                url: "Codes.aspx/Load_Codes",
                data: '{flag: ' + flag + ',code: "' + $code + '"}',
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    var list = JSON.parse(data.d);
                    $('#table_codes-deleted tbody').find("tr").remove();
                    $('#table_codes tbody').find("tr").remove();
                    $.each(list, function (i, item) {
                        var $tr = $('<tr>').append(
                                  $('<td class=highlight>').append(item.name),
                                  $('<td>').html((flag == 1 ? '<a class="btn default btn-xs green recover" data-id=' + item.id + ' data-name=' + item.name + '><i class="fa fa-undo"></i> ' + _recover + '</a>' : '<a class="btn default btn-xs purple edit" data-id=' + item.id + ' data-name=' + item.name + '><i class="fa fa-edit"></i> ' + _edit + '</a>')),
                                  $('<td>').html('<a class="btn default btn-xs black delete' + (flag == 1 ? "-deleted" : "") + '" data-id=' + item.id + ' ><i class="fa fa-trash-o"></i> ' + _delete + '</a>')
                                          ).appendTo('#table_codes' + (flag == 1 ? "-deleted" : "") + ' tbody');
                    });
                    if (flag == 1)
                        $('.modal-add').hide();
                },
                error: function () {
                    console.log('err')
                }
            });
});

我知道它有点拥挤，但这是合乎逻辑且安全的吗？我在数据表中删除了按钮。

[WebMethod]
public static string Load_Codes(int flag, string code)
{
    ClassDoc classDocument = new ClassDoc();
    DataTable dt = new DataTable();
    dt = classDoc.Code_Load(flag, code).Tables[0];

    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
    Dictionary<string, object> row;

    List<CodesDTO> List = new List<CodesDTO>();

    foreach (DataRow dr in dt.Rows)
    {
        CodesDTO codes = new CodesDTO();
        row = new Dictionary<string, object>();
        codes.id = Convert.ToInt64(dr["ID"].ToString());
        codes.name = dr["Name"].ToString();
        List.Add(codes);
    }
    return serializer.Serialize(List);
}   

现在，首先我在删除操作之前发送id，我认为我可以更安全。

我知道它太长了但最后我想知道它对形式来说是安全和合理的吗？

HTML

$(document).on('click', 'a.btn.delete', function () {
    var $id = $(this).attr('data-id');
    $.ajax({
        type: "POST",
        url: "Codes.aspx/SetVariables",
        data: '{id: "' + $id + '"}',
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            $('#delete-user').modal('toggle').parent();
        },
        error: function () {
            console.log('err')
        }
    });

});

$(document).on('click', '#btn-delete', function () {
    $.ajax({
        type: "POST",
        url: "Codes.aspx/Delete",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var i = data.d;
            if (i > 0)
                $('.alert-deleted').show();
            else
                $('.alert-failure-deleted').show();
            $('#delete-user').modal('hide');
            privateCodes.handleCodeList(0);
        },
        failure: function (response) {
            alert(response.d);
        }
    });
});


    public class CodesDTO
    {
        public string name { get; set; }
        public Int64 id { get; set; }
    }

    [WebMethod]
    public static void SetVariables(int id)
    {
        Codes.id = id;
    }

    [WebMethod]
    public static int Delete_Code()
    {
        int result = 0;
        if (Codes.id != 0 && Codes.code != "")
        {
            ClassDoc classDoc = new ClassDoc();
            result = classDoc.Code_Delete(Codes.id, Codes.code);
            if (result > 0)
                Codes.id = 0;
        }
        return result;
    } 

JAVASCRIPT

<div class="form-group"> 
 <label>
    <input type="text" name="view" />
    <%=GetLocalResourceObject("View.Text") %>
</label>
<label>
    <input type="text" name="insert" />
    <%=GetLocalResourceObject("Insert.Text") %>
</label>
<label>
    <input type="text" name="update" />
    <%=GetLocalResourceObject("Update.Text") %>
</label>
<label>
    <input type="text" name="delete" />
    <%=GetLocalResourceObject("Delete.Text") %>
</label>
<label>
    <input type="text" name="download" />
    <%=GetLocalResourceObject("Download.Text") %>
</label>
<label>
    <input type="text" name="upload" />
    <%=GetLocalResourceObject("Upload.Text") %>
</label>
<label>
    <input type="text" name="revision" />
    <%=GetLocalResourceObject("Revision.Text") %>
</label>
<label>
    <input type="text" name="foldercreate" />
    <%=GetLocalResourceObject("Create.Text") %>
</label>
<label>
    <input type="checkbox" name="flag" />
    <%=GetLocalResourceObject("lag.Text") %>
</label>
</div>
 <div class="actions">
    <a href="#" class="btn red-sunglo btn-sm" id="btnSave">
        <i class="fa fa-check"></i>&nbsp; <%=GetLocalResourceObject("btnSave") %> </a>
</div>

C＃

$(document).on('click', '#btnSave', function () {
    setPermission($folder, $role)
});

var setPermission = function (folder, role) {

    var _view = $("input[type='text'][name='view']").val()
        , _insert = $("input[type='text'][name='insert']").val()
        , _update = $("input[type='text'][name='update']").val()
        , _delete = $("input[type='text'][name='delete']").val()
        , _download = $("input[type='text'][name='download']").val()
        , _upload = $("input[type='text'][name='upload']").val()
        , _revision = $("input[type='text'][name='revision']").val()
        , _foldercreate = $("input[type='text'][name='foldercreate']").val()
        , _flag = $("input[type='checkbox'][name='flag']").is(":checked")
    ;

    $.ajax({
        type: "POST",
        url: "List.aspx/Set",
        data: '{folder: "' + folder +
              '",role: "' + role +
              '",flag: "' + _flag +
              '",view: "' + _view +
              '",insert: "' + _insert +
              '",update: "' + _update +
              '",delete: "' + _delete +
              '",download: "' + _download +
              '",upload: "' + _upload +
              '",revision: "' + _revision +
              '",foldercreate: "' + _foldercreate + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var getPerm = data.d;
            if (getPerm > 1) {
                $('.alert-success-check').slideDown();
                setTimeout(function () {
                    $('.alert-success-check').slideUp();
                }, 3000);
                $('#tree_folder').jstree('refresh');
            } else {
                $('.alert-failure').slideDown();
                setTimeout(function () {
                    $('.alert-failure').slideUp();
                }, 3000);
            }

        },
        failure: function (response) {
            alert(response.d);
            $('.alert-failure').slideDown();
            setTimeout(function () {
                $('.alert-failure').slideUp();
            }, 3000);
        }
    });


}

我不知道它是怎么样的，我只是想知道如何让它变得更容易和更安全。我在[WebMethod] public static int Set(Int64 folder, Int64 role, bool flag, string view, string insert, string update, string delete, string download, string upload, string revision, string foldercreate) { ClassDoc classDoc = new ClassDoc(); return classDocu.Set(role, folder, flag, view, insert, update, delete, download, upload, revision, foldercreate); } 标记所有<form>和input类型为button的情况下意外发现，它会使用查询字符串进行回发。我之前看到或听说过我可以直接发布行动或通过javascript序列发布但我找不到怎么样？

我希望，我可以清楚，我只想学习正确的方法。特别是表单逻辑和方式看起来不适合我，尽管我使用它，现在我在一个表单中有超过40个输入，我正在寻找正确的简单方法......