#asp.net #input #dynamic #webforms #controls
Вопрос:
Пожалуйста, обратите внимание: мне не обязательно нужен рабочий код. Я просто не знаю, как выразить словами то, что я ищу, чтобы даже найти ответ в Интернете. Я думаю, что я просто прошу небольшого руководства о том, какой контроль я хотел бы использовать для достижения своей цели.
В основном, когда я иду на работу, я буду использовать разные объемы и типы инвентаря. Таким образом, одна позиция будет состоять из
- описание предмета
- Используемое Количество
- Использованный байтех
Я собираю их с помощью текстового поля веб-формы. Я хотел бы иметь кнопку с надписью «Добавить», которая затем позволит мне ввести другую строку и так далее.
Затем в какой-то момент кнопка «Отправить» в форме соберет эти элементы и введет их в базу данных MSSQL.
В настоящее время я использую ASP.Net фреймворк и веб-формы.
Может ли кто-нибудь, пожалуйста, сказать мне, какой контроль позволил бы это сделать, может быть, дать мне несколько советов о том, что искать?
Комментарии:
1. «динамический» охватывает его… так что ваше представление становится динамическим представлением, которое может добавлять/удалять элементы. Поэтому подумайте о массивах элементов типа представления, привязанных к массивам данных. Я бы отказался от веб-форм. Сейчас есть лучшие варианты. (Не то, чтобы вы не могли сделать это в веб-формах, если бы хотели, но теперь они унаследованы…)
Ответ №1:
Хорошо, на самом деле это довольно просто, но мы позволим asp.net делайте большую часть работы за нас.
Итак, мы предполагаем, что у нас есть эти две таблицы:
итак, у нас есть таблица, в которой перечислены рабочие места
И затем, как указано выше, у нас есть таблица, в которой перечислены элементы заданий для каждого сайта.
Хорошо, итак, мы показываем Сайты вакансий.
Добавьте представление сетки — создайте его с помощью мастеров:
Теперь удалите (удалите) источник данных со страницы — он вам не нужен. Удалите параметр источника данных для представления сетки
И давайте опустим кнопку «Самолет Джейн» в эту сетку.
Таким образом, эта разметка — большая ее часть была сгенерирована для меня
lt;div style="padding:25px"gt; lt;asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table" Width="40%"gt; lt;Columnsgt; lt;asp:BoundField DataField="JobSite" HeaderText="JobSite" /gt; lt;asp:BoundField DataField="JobDate" HeaderText="JobDate" DataFormatString="{0:yyyy-MM-dd}" /gt; lt;asp:BoundField DataField="Foreman" HeaderText="Foreman" /gt; lt;asp:BoundField DataField="Description" HeaderText="Description" /gt; lt;asp:TemplateField HeaderText="View"gt; lt;ItemTemplategt; lt;asp:Button ID="cmdView" runat="server" Text="View Job" CssClass="btn" Onclick="cmdView_Click"/gt; lt;/ItemTemplategt; lt;/asp:TemplateFieldgt; lt;/Columnsgt; lt;/asp:GridViewgt; lt;/divgt;
And our code to load this grid is thus this:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then LoadGrid End If End Sub Sub LoadGrid() GridView1.DataSource = MyRst("SELECT * from JobSites Order by JobDate") GridView1.DataBind() End Sub
Ok, we now have this:
Ok, so now we need to wire up that «view» button.
So, we grab the PK row value — jump to our edit items page;
Protected Sub cmdView_Click(sender As Object, e As EventArgs) Dim btn As Button = sender Dim gRow As GridViewRow = btn.Parent.Parent ' get PK database ID Dim PK As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID") ' Now jump to our job add job items page Session("JobID") = PK Response.Redirect("JobAddItems.aspx") End Sub
So, now we need to build our 2nd page.
I could use a repeater — but I used DataList — to display the ONE job.
I again used the wizards — then blow out the DataSource setting and item on that page.
We then drop in a gridview for the «many» items (the job items).
I now have this:
lt;br /gt; lt;div style="border:solid;border-color:black;width:20%"gt; lt;asp:DataList ID="DataList1" runat="server" DataKeyField="ID"gt; lt;ItemTemplategt; JobSite: lt;asp:Label ID="JobSiteLabel" runat="server" Text='lt;%# Eval("JobSite") %gt;' Font-Size="Larger" Font-Bold="true" /gt; lt;br /gt; JobDate: lt;asp:Label ID="JobDateLabel" runat="server" Text='lt;%# Eval("JobDate", "{0:yyyy-MM-dddd}") %gt;' /gt; lt;br /gt; Foreman: lt;asp:Label ID="ForemanLabel" runat="server" Text='lt;%# Eval("Foreman") %gt;' /gt; lt;br /gt; Description: lt;asp:Label ID="DescriptionLabel" runat="server" Text='lt;%# Eval("Description") %gt;' /gt; lt;br /gt; lt;br /gt; lt;/ItemTemplategt; lt;/asp:DataListgt; lt;br /gt; lt;/divgt; lt;br /gt; lt;div style="float:left"gt; lt;asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table borderhide" Width="30%"gt; lt;Columnsgt; lt;asp:TemplateField HeaderText="Description"gt; lt;ItemTemplategt; lt;asp:TextBox id="txtDesc" runat="server" Text='lt;%# Eval("ItemDescription") %gt;' /gt; lt;/ItemTemplategt; lt;/asp:TemplateFieldgt; lt;asp:TemplateField HeaderText="Qty"gt; lt;ItemTemplategt; lt;asp:TextBox id="txtQty" runat="server" Text='lt;%# Eval("Qty") %gt;' TextMode="Number" /gt; lt;/ItemTemplategt; lt;/asp:TemplateFieldgt; lt;asp:TemplateField HeaderText="Used By"gt; lt;ItemTemplategt; lt;asp:TextBox id="txtUsedBy" runat="server" Text='lt;%# Eval("UsedBy") %gt;' /gt; lt;/ItemTemplategt; lt;/asp:TemplateFieldgt; lt;/Columnsgt; lt;/asp:GridViewgt; lt;div style="float:right"gt; lt;asp:Button ID="cmdAdd" runat="server" Text="Add Item" CssClass="btn" style="margin-top:-20px" /gt; lt;/divgt; lt;/divgt; lt;div style="clear:both"gt;lt;/divgt; lt;asp:Button ID="cmdSave" runat="server" Text="Save" CssClass="btn" /gt; lt;asp:Button ID="cmdCancel" runat="server" Text="Cancel" CssClass="btn" style="margin-left:40px"/gt; lt;/divgt;
Хорошо, и код для загрузки этого вот такой:
Мы загружаем основную запись — только для отображения, а затем представление сетки дочерних элементов.
Dim rstJobItems As New DataTable Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then ViewState("JobID") = Session("JobId") LoadData() Else rstJobItems = ViewState("JobItems") End If End Sub Sub LoadData() DataList1.DataSource = MyRst("SELECT * from JobSites WHERE ID = " amp; ViewState("JobID")) DataList1.DataBind() rstJobItems = MyRst("SELECT * FROM JobItems where Job_ID = " amp; ViewState("JobID")) GridView1.DataSource = rstJobItems GridView1.DataBind() ViewState("JobItems") = rstJobItems End Sub
Итак, теперь на первой странице, когда мы нажимаем на строку, мы переходим на 2-ю страницу, и мы видим/имеем это:
Поэтому нам нужно подключить кнопку, чтобы добавить новую строку.
Этот код выглядит так:
Protected Sub cmdAdd_Click(sender As Object, e As EventArgs) Handles cmdAdd.Click ' user might have done some edits GridToTable() ' create a new row Dim NewRow As DataRow = rstJobItems.NewRow NewRow("Job_id") = ViewState("JobID") NewRow("Qty") = 0 rstJobItems.Rows.Add(NewRow) GridView1.DataSource = rstJobItems GridView1.DataBind() End Sub
Итак, скажем, выше, я нажимаю на строку добавить, и вы увидите это: (на самом деле я щелкнул по нему два раза).
Итак, вы можете свободно просматривать и редактировать данные в этой таблице. Вы можете редактировать/изменять существующие строки или добавлять новую строку и простую вкладку вокруг и вводить данные.
Итак, теперь давайте подключим кнопку «Сохранить». Эта кнопка сохранения должна разрешать и обрабатывать редактирование строк, а также сохранение изменений — все в одном кадре в базе данных.
Таким образом, код кнопки «Сохранить» выглядит следующим образом:
Protected Sub cmdSave_Click(sender As Object, e As EventArgs) Handles cmdSave.Click GridToTable() Using conn As New SqlConnection(My.Settings.TEST4) Using cmdSQL As New SqlCommand("SELECT * FROM JobItems WHERE ID = 0", conn) Dim da As New SqlDataAdapter(cmdSQL) Dim daU As New SqlCommandBuilder(da) da.Update(rstJobItems) End Using End Using ' data add, and any edit now saved - return to our job site listing page Response.Redirect("JobSites.aspx") End Sub
So we send grid to table, and then in ONE database update, send the table back to the database.
Of course after we save, we return back to our first page with the grid now read to edit more.
So, the other routine used in above was sending the Grid (rows) back to the table.
That code is this:
Sub GridToTable() For Each gRow As GridViewRow In GridView1.Rows Dim OneRow As DataRow = rstJobItems.Rows(gRow.RowIndex) OneRow("ItemDescription") = CType(gRow.FindControl("txtDesc"), TextBox).Text OneRow("Qty") = CType(gRow.FindControl("txtQty"), TextBox).Text OneRow("UsedBy") = CType(gRow.FindControl("txtUsedBy"), TextBox).Text Next End Sub
And of course the cancel button? Well, if you add some rows, or just edit the rows, and hit cancel? Well, we don’t save — but just return to the previous page.
eg:
Protected Sub cmdCancel_Click(sender As Object, e As EventArgs) Handles cmdCancel.Click Response.Redirect("JobSites.aspx") End Sub
And last but not least, I have a «general» helper routine that simple returns a data table — and I used it several times in above. That routine kind of gives me a FoxPro or MS-Access like ability to get a data table with great ease (in place of typing that same code over and over).
That routine was this:
Public Function MyRst(strSQL As String) As DataTable Dim rstData As New DataTable Using conn As New SqlConnection(My.Settings.TEST4) Using cmdSQL As New SqlCommand(strSQL, conn) conn.Open() rstData.Load(cmdSQL.ExecuteReader) End Using End Using Return rstData End Function
Так что вышесказанное-это довольно много от начала до конца. Это, конечно, быстрый код, и он выполняется довольно быстро/быстро для переполнения стека. Но он полон замечательных идей, и, как уже отмечалось, я позволяю мастерам генерировать большую часть разметки. (но затем удалите источник данных из GV, а также элемент источника данных, который создается на странице.
Итак, вкратце:
Я не писал большую часть этой разметки — я позволил мастерам сгенерировать большую ее часть.
Обратите внимание, насколько МАЛЕНЬКИМИ и относительно простыми были биты кода. мы разбили это на части размером с укус — таким образом, каждая процедура-это не так много кода.
Мы ТАКЖЕ позволили .net создать для нас команды обновления sql (и вставки). это устранило НАГРУЗКУ на ЛОДКУ с различными параметрами, а также нагрузку на лодки, чтобы связать это проволокой. И это также НАМНОГО лучше для производительности, так как ado.net является умным — для строк, не измененных — он не отправляет обновления на sql server.
Обратите также внимание, как ОДИН простой метод обновления
da.Update(rstJobItems)
Обрабатывает ОБА изменения/обновления, вставки с помощью одной команды. И мы, вероятно, могли бы/должны нажать кнопку удалить строку — и обновление также справится с этим для нас!!!
Итак, выше есть много замечательных идей, но ключевыми концепциями являются:
Используйте как можно больше возможностей мастеров и встроенных элементов управления.
Используйте возможности ado.net чтобы обновить таблицу изменений ОДНИМ выстрелом обратно в базу данных — и, как показано выше, ОДНО и то же обновление также работает как для вставок, так и для обновлений одновременно.
Комментарии:
1. Как бы парень пошел на это, если бы такой работы еще не существовало? То, что я пытаюсь сделать, — это превратить бумажную форму в веб-форму. В бумажной версии есть информация о задании, а затем раздел, в котором мы пишем используемые элементы. Я предполагаю, что я пытаюсь создать веб-форму, в которой мы заполняем сведения о работе и использованные материалы и нажимаем «Отправить». Я полагаю, что мог бы поместить строки полей ввода для используемых элементов, но пытался проявить фантазию и использовать кнопку добавить 🙂
2. да, и в моем примере есть пункт добавить. Разве это не то, что вы ищете? Мы можем перемещать кнопку «Добавить» в любое удобное для вас место. Что касается планировки — это тоже в значительной степени ваш выбор. При нажатии кнопки Добавить элемент появляется новая строка. Я имею в виду, как еще это будет работать, когда вы нажмете «Добавить элементы»? В опубликованном примере используется и есть кнопка «Добавить элемент» — было ли что-то еще о том, как будет работать кнопка «Добавить»? Когда вы нажимаете эту кнопку, появляется новая строка. Затем вы можете ввести в эту строку все, что захотите. Как еще вы могли бы ожидать, что это сработает? Теперь я здесь в замешательстве.
3. Я поместил «Добавить» только на 2-ю страницу, чтобы добавить элементы заданий. Но для первой части? Конечно, это будет работать точно так же, как в примере на 2-й странице. Я опустил кнопку добавить новое задание в первой сетке — но да, она будет функционировать и работать так же, как в примере сетки 2-й страницы, в котором нажмите кнопку добавить, чтобы создать новую строку. Я вроде как думал, что этот мистер Очевидность подразумевался здесь? Просто возьмите пример 2-й страницы, в котором я добавил строку сетки, и используйте ее на первой странице, чтобы добавить подход, аналогичный заданию. Я имею в виду, сколько здесь нужно держать за руку???
4. Я имею в виду, что для первой страницы мы могли бы использовать добавить строку. Однако, если информация о работе была сложной и содержала НАМНОГО больше информации? Тогда, конечно, у нас была бы кнопка «Добавить задание», и если простого добавления строки в сетку будет недостаточно, тогда мы могли бы создать форму для ввода информации о задании, нажать «Сохранить», а затем вернуться к сетке заданий, чтобы затем выбрать «Просмотр», а затем у вас будет 2-я страница для отображения задания и добавления элементов задания на этой странице. Я имею в виду, что то, как вы хотите, чтобы это работало, на 100% зависит от вас, и вы довольно свободны, как птица, чтобы спроектировать это так, как вы хотите.
5. И, конечно, когда мы перейдем к этой 2-й странице, возможно, мы сделаем это для создания новой работы. Итак, на 2-й странице, которую мы имеем, мы могли бы использовать эту страницу КАК для редактирования существующих заданий, и если мы нажмем «Добавить задание», то в верхней части этой 2-й страницы будут сведения о задании, которые вы можете сначала отредактировать/заполнить, а затем добавить элементы задания в соответствии с примером. Настолько уверен, что 2-я страница могла бы обрабатывать как добавление нового задания, так и редактирование существующего. Итак, я не проводил редактирование верхней части работы, но мы, безусловно, могли бы это сделать. И как это работает? Что ж, это будет работать аналогично коду, который сохраняет сетку элементов заданий, но для главного специалиста по обработке данных