Я сожалею, что это похоже на другие вопросы, но я не могу найти то, что ищу точно
Я создаю модальный загрузчик, где пользователи могут создавать новые вещи (неважно, что),это в основном форма в .NET.В нижней половине модального окна есть сетка, в которую пользователи могут вводить вещи, например, ABC, а строки можно перетаскивать в любом порядке.Когда нажата кнопка «Сохранить», она сохраняет все данные формы, а также порядок в виде сетки.
Мне удалось использовать google и JQuery (1.8.3), чтобы сделать вид сетки перетаскиваемым, однако каждый разКнопка для добавления данных ABC в сетку нажимается на всю форму обратной передачи и модал обновляется, так что вы получаете модальное исчезновение и повторное появление.Я хотел бы сделать это более плавным, хотя добавьте панель обновления, и пока это работает, перетаскивание не работает.После интенсивного поиска в Google я обнаружил, что это происходит потому, что панель обновлений выполняет частичную обратную передачу и в результате функция JQuery теряется.Мне сообщили, что лучшим способом было бы привязать их.Сейчас я не знаю JS, не говоря уже о JQuery, но мне удалось заставить что-то работать.Может кто-нибудь объяснить, что здесь происходит, и есть ли лучший способ для достижения моих целей.
Gridview ниже:
<asp:GridView ID="gv" CssClass="table table-hover" runat="server" DataKeyNames="ID" AutoGenerateColumns="false" GridLines="None" Width="100%">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%# Eval("ID") %>' Width="100%"></asp:Label>
<input type="hidden" name="sequence" value='<%# Eval("Sequence") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="A">
<ItemTemplate>
<asp:Label ID="lblA" runat="server" Text='<%# Eval("A") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="B">
<ItemTemplate>
<asp:Label ID="lblB" runat="server" Text='<%# Eval("B") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="C">
<ItemTemplate>
<asp:Label ID="lblC" runat="server" Text='<%# Eval("C") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div class="row">
<asp:TextBox ID="txtA" runat="server"></asp:TextBox>
<asp:TextBox ID="txtB" runat="server"></asp:TextBox>
<asp:TextBox ID="txtC" runat="server"></asp:TextBox>
<asp:Button ID="btnAddToGrid" runat="server" text="Add" />
</div>
Теперь в коде позади, когда нажата кнопка «Добавить», он создает набор данных (на самом деле делает различные другие вещи из-за сложности), включая значения из текстового поляA, B & C и повторно связывает вид сетки с новым датаемым
. Я использую следующее, чтобы перетаскивать строки вида сетки:
$x(function () {
$x("[id*=gv]").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
$x(this).find("tbody").append(ui.item);
}
});
});
Это все работает, но когда я нажимаюДобавьте его, обновите весь модал, чтобы модал исчез и снова появился, что нежелательно.Затем я изменил JQuery на следующее после Google:
$x(init); function init() {
BindEvents();
Sys.Application.add_load(BindEvents);
}
function BindEvents() {
$x("[id*=gv]").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
},
receive: function (e, ui) {
$x(this).find("tbody").append(ui.item);
}
});
}
И добавил панель обновления вокруг моего вида сетки
<asp:UpdatePanel ID="upnl" runat="server">
<ContentTemplate>
<asp:GridView ID="gv" CssClass="table table-hover" runat="server" DataKeyNames="ID" AutoGenerateColumns="false" GridLines="None" Width="100%">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%# Eval("ID") %>' Width="100%"></asp:Label>
<input type="hidden" name="sequence" value='<%# Eval("Sequence") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="A">
<ItemTemplate>
<asp:Label ID="lblA" runat="server" Text='<%# Eval("A") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="B">
<ItemTemplate>
<asp:Label ID="lblB" runat="server" Text='<%# Eval("B") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="C">
<ItemTemplate>
<asp:Label ID="lblC" runat="server" Text='<%# Eval("C") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div class="row">
<asp:TextBox ID="txtA" runat="server"></asp:TextBox>
<asp:TextBox ID="txtB" runat="server"></asp:TextBox>
<asp:TextBox ID="txtC" runat="server"></asp:TextBox>
<asp:Button ID="btnAddToGrid" runat="server" text="Add" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Это именно то, что я хочу, вы можете нажать кнопку безвсе модальное обновление внутри панели обновлений.Но что это на самом деле делает, я понимаю, это снова связывает Jquery, но как?
Примечание: пока это работает, вчера я заметил, что после добавления этого добавление строк в сетку просмотра заняло очень много времени.Почти как 5-10 секунд от нажатия кнопки «Добавить к сетке», чтобы она действительно показывалась.У кого-нибудь есть подсказка?