Question

我在这里遇到一个非常奇怪的问题。我正在调用一个动作（这是一个视图），我有两个按钮。 javascript中有这些按钮的单独句柄，它们放在同一个.cshtml文件中。代码如下：

@model fbpm.Models.UserDetail

@{
    ViewBag.Title = "My View"; }

<style type="text/css">
    #top 
    {
        width:360px;
        float: left;
        height:100px;
        border-left: 1px solid black;
        border-bottom: 1px solid black;        
    }
    #right
    {
        width:360px;
        float: left;
        height:100px;
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-bottom: 1px solid black;             
    } </style>
    <div id="top" class="display-field">
    &nbsp;&nbsp;Name  &nbsp;&nbsp;  : @Html.DisplayFor(model => model.UserName)    
    <br />
    <br />
    <input id="userid" type="hidden" value = @Html.DisplayFor(model => model.UserID)></input>
    &nbsp;&nbsp;Address : @Html.DisplayFor(model => model.FullAddress) <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    @Html.DisplayFor(model => model.State) <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     @Html.DisplayFor(model => model.Country)    
     <br /> 
     <br /> 
    </div>
    <div id="top" class="display-field">
    &nbsp;&nbsp;PAN #  &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; : @Html.DisplayFor(model => model.PANNo)
    <br /><br />
    &nbsp;&nbsp;Booked Date&nbsp;&nbsp;: @Html.DisplayFor(model => model.BookedDate)
    <br />
    <br />
    <br />
    <br />
    </div>
    <div id="right" class="display-field">
    &nbsp;&nbsp; Booked Amount&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: &nbsp; INR &nbsp; @Html.DisplayFor(model => model.BookedAmount)
    <br /><br />
    &nbsp;&nbsp; Remaining Amount &nbsp; : &nbsp; INR &nbsp; 
    <label id="ramt"/>
    <br />
    <br />
    <br />
    <br />
    </div>
    <div id="display" style="clear:both;">
     <button type="button"style="width:150px" id="paysched" name="paysched" onclick="handleflat();">Payment Schedule</button>
     <button type="button" style="width:150px"  id="flat" name="flat" onclick="handleps();"> Flat </button>
    </div>
    <br />
    <div id="container" style="clear:both;"> Click on the above button to display Flat/Payment Schedule </div> <script type="text/javascript" language="javascript">
    $.get('@Url.Action("GetRamt", "Customer")?id=' + document.getElementById("userid").value,
        function (amount) {
            document.getElementById("ramt").innerHTML = amount;
        });
        function handleflat() {
            $.get('@Url.Action("GetFlat", "Customer")?id=' + document.getElementById("userid").value,
           function (viewResult) {
               $("#container").html(viewResult);
           });
        }
        function handleps() {
            $.get('@Url.Action("paysched", "Customer")?id=' + document.getElementById("userid").value,
        function (viewResult) {
            $("#container").html(viewResult);
        });
    } </script>

但是，当我点击第二个按钮（付款时间表）时，它会调用平面按钮操作。当我一直点击第二个按钮时，它有时会起作用！当它工作时，我点击窗口中的其他区域，调用第一个按钮的功能。

请有人帮忙吗？

* 编辑：第一个按钮总是突出显示，我想，这就是为什么总是调用第一个按钮的功能的问题。我不想要这种行为*

EDIT2：与此同时，我正在玩代码，我将按钮更改为单选按钮！最初，两个单选按钮都没有被选中，当我点击第二个按钮时，第二个按钮被选中。现在，是有趣的部分=＆gt;当我点击结果视图的任何部分时，第一个单选按钮被选中！现在，两个单选按钮都打开了！：（

* EDIT3：我将这两个单选按钮命名为同名。现在，单击结果div的任何部分即可选择第一个单选按钮！ *

将鼠标放在DIV - CONTAINER上，突出显示第一个按钮，这就是为什么单击该按钮的原因。

此致哈

Answer 1

除了你的html可以使用一些清理之外，例如：

<input id="userid" type="hidden" value = @Html.DisplayFor(model => model.UserID)></input>

变为：

@Html.HiddenFor(model => model.UserID)

另外...... nbsp;等等。

javascript可能是这样的：

$(function () {
    // get the user id
    var userId = $('#UserID').val();

    // get 'Remaining Amount' -> this should be included in your view model frankly speaking
    // getting it like this is not "ideal"
    $.get('@Url.Action("GetRamt", "Customer")?id = ' + userId, function (responseData) {
        $('#ramt').text(responseData);
    });

    // bind the button events
    $('#flat').click(function() {
        var flatUrl = '@Url.Action("GetFlat", "Customer")?id = ' + userId;
        getCustomerData(flatUrl);
    });

    $('#paysched').click(function () {
        var paySchedUrl = '@Url.Action("paysched", "Customer")?id = ' + userId;
        getCustomerData(paySchedUrl);
    });

    // handle the response from the server for the customer data
    var getCustomerData = function(url) {
        $.get(url, function(responseData) {
            $('#container').html(responseData);
        });
    };
});

我希望这会有所帮助。

asp.net C＃中的两个按钮很奇怪

1 个答案: