如何在ASP.NET MVC中将模型值传递给弹出窗口

huangapple go评论72阅读模式
英文:

How to pass a model value to popup window in ASP.NET MVC

问题

在ASP.NET MVC中,您可以从视图传递值到控制器。但在我的情况下,我不想要一个新页面。我希望的是,当我单击按钮时,弹出窗口会出现,我想在单击弹出窗口上的删除按钮时删除记录。

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td width="50%">
                @item.TeamName
            </td>
            <td>
                @item.TeamLeaderId
            </td>
            <td>
                @item.TeamEstablished
            </td>
            <td>
                <a asp-controller="Team" asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary"><i class="bi bi-pencil">Edit</i></a>
            </td>
            <td>
                <a data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-danger">
                    <i class="bi bi-pencil">Remove</i>
                </a>
            </td>
        </tr>
    }
</tbody>

上面是如何在模型的foreach循环中获取值的。在“Remove”部分,每当用户单击按钮时,屏幕上会出现一个弹出窗口,如下所示:

如何在ASP.NET MVC中将模型值传递给弹出窗口

这里我需要两件事。首先,弹出窗口上的文本不应该是“Do you really want to remove This Team”,而应该是确切的团队名称,即'mobileTeam',所以结果应该是'Do you really want to remove mobileTeam'。

其次,当单击删除按钮时,应触发控制器中的POST操作方法,并从数据库中删除记录。它应该传递团队的id到POST操作方法。以下是我的POST方法:

public IActionResult Delete(int? id)
{
    if (id == null)
    {
        return NotFound();
    }

    var obj = applicationDbContext.Teams.FirstOrDefault(u => u.Id == id);

    if (obj == null)
    {
        return NotFound();
    }

    return View(obj);
}

这是我的模型弹出窗口:

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!--<button type="button" class="close" data-bs-dismiss="modal">&times;</button>-->
                <h4 class="modal-title">Delete Record</h4>
            </div>
            <div class="modal-body">
                <p>Do you really want to remove this team?</p>
            </div>
            <div class="modal-footer">
                <div class="container">
                    <button type="button" class="btn btn-danger"><i class="bi bi-pencil">Remove</i></button>
                    <button type="button" class="btn btn-secondary " data-bs-dismiss="modal" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>
英文:

In ASP.NET MVC, you can pass values from a view to a controller. However in my case I don't want a new page. What I wish is, when I click to a button a popup window shows up and I would like to delete the record whenever I click the delete button on the popup window.

&lt;tbody&gt;
    @foreach (var item in Model)
    {
        &lt;tr&gt;
            &lt;td width=&quot;50%&quot;&gt;
                @item.TeamName
            &lt;/td&gt;
            &lt;td&gt;
                @item.TeamLeaderId
            &lt;/td&gt;
            &lt;td&gt;
                @item.TeamEstablished
            &lt;/td&gt;
            &lt;td&gt;
                &lt;a asp-controller=&quot;Team&quot; asp-action=&quot;Edit&quot; asp-route-id=&quot;@item.Id&quot; class=&quot;btn btn-primary&quot;&gt;&lt;i class=&quot;bi bi-pencil&quot;&gt;Edit&lt;/i&gt;&lt;/a&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;a data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#myModal&quot; class=&quot;btn btn-danger&quot;&gt;
                    &lt;i class=&quot;bi bi-pencil&quot;&gt;Remove&lt;/i&gt;
                &lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    }
&lt;/tbody&gt;

Above, there is how I get the value in a foreach loop from the model. In Remove part, whenever user clicks on the button a popup windows shows up in the screen like this:

如何在ASP.NET MVC中将模型值传递给弹出窗口

I need two things in here. First, instead of "Do you really want to remove This Team" it should be the exact team name which is 'mobileTeam' so the result should be 'Do you really want to remove mobileTeam'.

Second, when remove button is clicked it should trigger the post action method in controller and remove the record from database. It should pass the id of the team to the post action method. Here is how my post method is.

public IActionResult Delete(int? id)
{
        if (id == null)
        {
            return NotFound();
        }

        var obj = applicationDbContext.Teams.FirstOrDefault(u =&gt; u.Id == id);

        if (obj == null)
        {
            return NotFound();
        }

        return View(obj);
}

This is my model popup:

&lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot; role=&quot;dialog&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-header&quot;&gt;
            @*&lt;button type=&quot;button&quot; class=&quot;close&quot; data-bs-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;*@
            &lt;h4 class=&quot;modal-title&quot;&gt;Delete Record&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
            &lt;p&gt;Do you really want to remove this team?&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;&lt;i class=&quot;bi bi-pencil&quot;&gt;Remove&lt;/i&gt;&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary &quot; data-bs-dismiss=&quot;modal&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;  

答案1

得分: 2

请查看这个问题。它解决了你的第一个问题。

首先,你应该添加

data-id=&quot;@item.TeamName&quot;

然后,你需要在你的代码中添加额外的JavaScript。

$(&#39;#myModal&#39;).on(&#39;show.bs.modal&#39;, function(e) {
    var teamName = $(e.relatedTarget).data(&#39;teamName&#39;);
    $(e.currentTarget).find(&#39;input[name=&quot;teamName&quot;]&#39;).val(teamName);
});

至于API调用,可以尝试这个

在你的情况下,它会类似于这样:

onClick=&#39;return DeleteTeam()&#39;

在JavaScript中,可以这样做:

function deleteTeam() {
    $.ajax({          
        type: &quot;DELETE&quot;,            
        URL: &quot;/api/{ControllerName}/{Endpoint}&quot;,
        data: { id: $(&#39;#TeamId&#39;).val() },
        contentType: &quot;data/json; charset=utf-8&quot;,  
        success: function (result) {
            window.location.href = &quot;{yourApiAddress}&quot; + $(&#39;#AkontasId&#39;).val();
        },
        error: function () {
            alert(&quot;error&quot;);
        }
    });
}
英文:

Try to check this question. It solves the first part of yours.
First, you should add

data-id=&quot;@item.TeamName&quot;

Then, you have to add extra Javascript to your code.

$(&#39;#myModal&#39;).on(&#39;show.bs.modal&#39;, function(e) {
    var teamName = $(e.relatedTarget).data(&#39;teamName&#39;);
    $(e.currentTarget).find(&#39;input[name=&quot;teamName&quot;]&#39;).val(teamName);
});

As for the API call, try this

In your case it would look something like this:

onClick=&#39;return DeleteTeam()&#39;

At JS, do something like this:

function deleteTeam() {
            $.ajax({          
                type: &quot;DELETE&quot;,            
                URL: &quot;/api/{ControllerName}/{Endpoint}&quot;,
                data: { id: $(&#39;#TeamId&#39;).val() },
                contentType: &quot;data/json; charset=utf-8&quot;,  
                success: function (result) {
                    window.location.href = &quot;{yourApiAddress}&quot; + $(&#39;#AkontasId&#39;).val();
                },
                error: function () {
                    alert(&quot;error&quot;);
                }
            });
        }

huangapple
  • 本文由 发表于 2023年2月24日 01:21:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/75548224.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定