sayli1995 Ответов: 1

Html таблица tr/td атрибут кнопка нажмите кнопку popupform для заполнения данных

привет ,

есть головоломка ,
у меня есть представление списка в таблице cshtml и у него есть две кнопки 1 редактировать и 2 детали
на этой строке атрибута edit нажмите кнопку Мне нужно открыть новую всплывающую форму

я пытался, но не получил ответа после щелчка btn

нужен пример учебника

Что я уже пробовал:

таблица HTML 

<table class="tbl1 table table-responsive table-hover table-bordered" id="tbl1" style="width:100%">

			<tr style="background-color:palegoldenrod;height:135%">
				<td class="hidme"></td>
				<td style="width:30%">
					@Html.ActionLink("SypplyerName", "ListGetINV2", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
				</td>
				<td>
					Invoice No
				</td>
				<td>
					@Html.ActionLink("Invice Date", "ListGetINV2", new { sortOrder = ViewBag.DateSortParm, currentFilter = ViewBag.CurrentFilter })
				</td>
				<td>
					TaxAmount
				</td>
				<td>
					Invoice Amount
				</td>
				<td></td>
			</tr>
			@foreach (var item in Model)
			{
				<tr style="background-color:#eff6de">
					<td class="hidme">
						@Html.HiddenFor(modelItem => item.PerTranId, new { @class = "PerTranId text-danger" })
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.SypplyerName)
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.InvoiceNo)
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.InvoiceDate)
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.TaxAmount)
					</td>
					<td>
						@Html.DisplayFor(modelItem => item.TotalAmount)
					</td>
					<td>
						@Html.ActionLink("Edit", "EditInv", new { id = item.PerTranId }) |
						
						<input type="submit" class="dtl btn btn-warning" id="EditInv" onclick="PopupForm('@Url.Action("EditInv","Perchus")')" />
					</td>

				</tr>
			}
		</table>



код jquery 

    var popup;
$('#EditInv').on('Click', 'input.dtl', function () {
    function PopupForm(url) {
        var formDiv = $('<div/>');
        $.get(url)
            .done(function (response) {
                formDiv.html(response);

                popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'EDIT INVOICE REORD',
                    height: 500,
                    width: 600,
                    close: function () {
                        popup.dialog('distroy').remove();
                    }

                });
            });

    }
})

1 Ответов

Рейтинг:
5

Bryian Tan

Пара предложений

1. заменить 

$('#EditInv').on('Click', 'input.dtl', function () {
с 
$('#EditInv').on('click', function () {
- Я думаю, что ... Click чувствителен к регистру, и я не думаю, что код должен включать в себя 'input.dtl' потому что он ссылается на один и тот же элемент а не на отношения родитель потомок

2. Я не думаю, что 
onclick="PopupForm('@Url.Action("EditInv","Perchus")')"
необходимо, если jQuery является электропроводка событие onclick в Javascript должен выглядеть, как показано ниже

$('#EditInv').on('click', function () {
//button EditInv clicked, do something here or call a function
        var formDiv = $('<div/>');
        let url = '@Url.Action("EditInv","Perchus")';
        $.get(url)
            .done(function (response) {
                formDiv.html(response);

                popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'EDIT INVOICE REORD',
                    height: 500,
                    width: 600,
                    close: function () {
                        popup.dialog('distroy').remove();
                    }

                });
            });
});


3. С другой стороны, если вы предпочитаете код для использования события нажатия кнопки, то JavaScript должен выглядеть следующим образом
function PopupForm(url) {
    var formDiv = $('<div/>');
    $.get(url)
        .done(function (response) {
            formDiv.html(response);

            popup = formDiv.dialog({
                autoOpen: true,
                resizable: false,
                title: 'EDIT INVOICE REORD',
                height: 500,
                width: 600,
                close: function () {
                    popup.dialog('distroy').remove();
                }

            });
        });

}



Ссылка:
.on() | документация по API jQuery[^]

sayli1995

привет , Брайан Тан сэр ,
благодарю вас за вашу ценную поддержку ,

функция PopupForm(Url) {
var formDiv = $(");
предупреждение(Url)


$.получить(URL-адрес)
.done(функция (ответ) {
formDiv.html(ответ);

всплывающее окно = formDiv.диалог({
autoOpen: правда,
изменение размера: нет,
название: 'EDIT INVOICE REORD',
высота: 500 м,
ширина: 600,
закрыть: функция () {
всплывающее окно.диалоговое('уничтожить').удалить();
}
});
});
}

после нажатия кнопки он приходит и снимает массажное оповещение, то есть url ,но он не открывает всплывающую форму

это в контроллере
[HttpGet]
public ActionResult EditInv()
{

возвращение смотреть();
}

[HttpPost]
public ActionResult EditInv(int id)
{

возвращение смотреть();
}

и это новый вид всплывающей формы

@model WorkingPlace.Модели.PerchesDetail

@{
Layout = null;

}
ширина:50%;высота:50%;граница:двойная">*@
@using (Html.BeginForm("EditInv", "Perchus", FormMethod.Post, new { @class = "форма-горизонтальная" }))
{

@Html.LabelFor(Model => Model.Srno, new { @class = "Control-label" })
@Html.EditorFor(Model => Model.Srno, new { htmlAttributes = new { @class = "Form-control" } })


}


я не могу понять, что я ошибся здесь после того, как попробовал 3 часа работы над этим ,

снеха

Bryian Tan

Я только что заметил, что в вашем коде есть ActionLink, почему бы просто не использовать событие проводки ActionLink + jQuery? Кнопка может не работать, так как в url-адресе отсутствует параметр id