Две кнопки в asp.net C# работают странно

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> 

Однако, когда я нажимаю на вторую кнопку (График платежей), его вызывающему плоская кнопка действия в. И когда я продолжаю нажимать на вторую кнопку, иногда она срабатывает! И когда он работает, я нажимаю на какую-то другую область в окне, вызывается функция первой кнопки.

Пожалуйста, кто-нибудь может помочь?

* EDIT: первая кнопка всегда подсвечивается, и я предполагаю, что проблема заключается в том, почему функция первой кнопки всегда вызывается. Я не хочу этого поведения *

EDIT2: Между тем, я просто играл с кодом, и я сменил кнопки на радио кнопки! Первоначально оба переключателя не были выбраны, и когда я нажимаю на вторую кнопку, выбирается вторая кнопка. Теперь интересная часть => Когда я нажимаю на любую часть результирующего представления, выбирается первый переключатель. И теперь, оба переключателя включены! :(

* EDIT3: И я назвал обе кнопки радио с тем же именем Теперь, нажав на любой части результата DIV делает первый переключатель, выбранный *

Размещение мышь.! над DIV - КОНТЕЙНЕР, высвечивает кнопку Первой и вот почему эта кнопка становится щелкнула

с уважением, Хари

Answer 1

Помимо того, что ваш HTML может использовать некоторые очистки, например:

0.

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

Я надеюсь, что это помогает.