0

我在这里面临一个非常奇怪的问题。我正在调用一个动作（这是一个视图）并且我有两个按钮。这些按钮在 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：同时，我只是在玩代码，我将按钮更改为单选按钮！最初，两个单选按钮都没有被选中，当我点击第二个按钮时，第二个按钮被选中。现在，是有趣的部分 => 当我点击结果视图的任何部分时，第一个单选按钮被选中！！！现在，两个单选按钮都打开了！！！:(

* EDIT3：我将两个单选按钮命名为相同的名称。现在，单击结果 div 的任何部分都会选中第一个单选按钮！*

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

问候， 哈里

4

1 回答 1

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);
        });
    };
});

我希望这有帮助。

于 2013-05-11T06:54:46.383 回答