web-dev-qa-db-fra.com

Ajouter un événement à envoyer pour appeler la fonction JS dans MVC3

J'ai un problème avec l'appel de la méthode JS depuis un formulaire dans le projet MVC3: j'ai une page de "recherche" sans formulaire avec deux boutons - Rechercher et annuler. Cliquez sur la recherche exécute la fonction JS runSearch dans ProductDefinition.

<div id="productSearch-dialog" class="modal fade" style="width: 1000px; display: none">
<div class="modal-header">
    <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
    <h3>Search Results</h3>
</div>
<div class="modal-body" style="height: 650px;">
    <div>
        <input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font>
    </div>
    <div id="searchresultcontain" class="grid">
    </div>
    <div id="Pagination" class="pagination">
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" onclick="productDefinition.runSearch();">Search</button>
    <button class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>

Comment puis-je exécuter cette méthode JS (runSearch) lorsque j'appuie sur? Pour autant que je sache, il s'agira d'un événement onsubmit, qui est un événement de formulaire. Je dois donc ajouter un élément de formulaire avec la propriété onsubmit. J'ai essayé d'encadrer le champ de saisie avec la méthode d'assistance BeginForm:

@using (Html.BeginForm(new { onsubmit = "productDefinition.runSearch();" }))
{
    <input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font>
    <input type="submit" value="Submit" style="visibility: hidden" />
}

mais cela ne semble pas fonctionner - lorsque j'appuie sur entrée, pour une raison quelconque, récupère le source de la page et arrive à l'adresse URL localhost /? onsubmit = productDefinition.runSearch ().
Quelle peut être la source du problème et comment puis-je obtenir le même comportement pour onsubmit que pour onclick?

c#javascripthtmlasp.net-mvcasp.net-mvc-3
8
wzxsvm
 @using (Html.BeginForm(new { onsubmit = "return runSearch();" }))



<script type="text/javascript">
    function runSearch() {
           // your logic to perform the search.
           return true;
    }
</script>
11
Darren

Vous devez utiliser la version suivante de de la méthode BeginForm afin de spécifier les attributs HTML.

Cependant, l'utilisation de javascript en ligne étant considérée comme une mauvaise pratique, je vous conseillerais d'attribuer un attribut id à votre formulaire et de gérer son événement de soumission dans le fichier javascript externe. Si vous utilisez jQuery pour votre projet, voici un bon exemple tiré de leur documentation - http://api.jquery.com/submit/ . Dans le plan JavaSCript c'est un peu plus compliqué mais quand même facile à faire.

2
Sergey Rybalkin
@model Models.Person

<script type="text/javascript">
    $(document).ready(function () {
        $('#registerInputId').click(function () {
            alert('what do you do before send? For example encrypt the password');

            $('#Password').val(CryptoJS.MD5($('#Password').val()));
        })
    });
</script>

@using (Html.BeginForm())
    {
    @Html.AntiForgeryToken()
    <div class="form-horizontal" style="display: inline-block; margin: 5% auto;">
        <div style="font-size: 18px; margin-right:2px; margin-bottom:20px; text-align:right;">Add form</div>
        @Html.ValidationSummary(true)
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-5" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-5" })
            <div class="col-md-7">
                @Html.EditorFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)
            </div>
        </div>

        <div class="form-group" style="margin-top: 30px;">
            <div class="col-md-offset-3 col-md-6">
                <input id="registerInputId" type="submit" value="Register" class="btn btn-default" />
            </div>
        </div>
    </div>
}
0
ajcarracedo

Form.Id est requis si le gestionnaire onsubmit implémente une fonctionnalité générique, applicable à plusieurs formulaires. (exemple: désactivation de tous les champs de saisie)

Forme 

@using (Html.BeginForm(new { 
    id = "form24",
    onsubmit = "return onSubmitHandler(id);" 
 }))

gestionnaire 

<script type="text/javascript">
   function onSubmitHandler(formId) { /*formId is form24 */ }
</script>
0
tchelidze