CODEWITHSUNDEEP
asp.net-mvcvb.netasp.net-mvc-3razoronchange
aaronmallen
aaronmallen

Reputation: 1438

Update a model value on Html.TextBoxFor() onchange event without submitting

I have a textbox that I call in my view like so:

@Html.TextBoxFor(Function(m) m.ActivityIDReturn)

What I'd like to be able to do is whenever a value is inserted into this textbox I would like it to update the model without having to hit any type of submit button. Several elements are populated in the view by the value of this textbox.

So ideally the textbox would looks something like this:

@Html.TextBoxFor(Function(m) m.ActivityIDReturn, new with {Key .onchange=UpdateModel()})

or

@Html.TextBoxFor(Function(m) m.ActivityIDReturn, new with {Key .onchange= RETLog(ActivityIDReturn:=ActivityIDReturn)})

RETLog() being the function that creates the view in the firstplace.

So far the only way I've been able to accomplish this is:

@Html.TextBoxFor(Function(m) m.ActivityIDReturn, New With {Key .onchange = "javascript:submit()"})

But I can only imagine what horrible side effects might come from this kind of thing.

EDIT: Exactly what I am trying to accomplish here

In My Model I have this: 

Public Property PS As RecordsTaskView
            Get
                Return GlobalVar.db.PS.RecordsTaskViews.Find(ActivityIDReturn)
            End Get
            Set(ByVal value As RecordsTaskView)
                value = GlobalVar.db.PS.RecordsTaskViews.Find(ActivityIDReturn)
            End Set
End Property

In my view I have This:

 @Html.LabelFor(Function(m) m.ActivityIDReturn)
 @Html.TextBoxFor(Function(m) m.ActivityIDReturn, New With {Key .onchange="javascript:submit()"})
 @Html.DisplayFor(Function(m) m.PS.RefActionID)
 @Html.DisplayFor(Function(m) m.PS.QutDesc)
 @Html.DisplayFor(Function(m) m.PS.TaskDesc)
 @Html.DisplayFor(Function(m) m.PS.CltCode)
 @Html.DisplayFor(Function(m) m.PS.CltDesc)
 @Html.DisplayFor(Function(m) m.PS.BenIDin)

Basically all of these DisplayFor are populated by the value of this textbox. I would like these DisplayFor values to populate when the user enters a value in the textbox without the user having to refresh the page, or hitting enter or hitting any buttons.

Here is a view at my code in it's entirety: https://gist.github.com/aaronmallen/7042328

Upvotes: 3

Views: 22891

Answers (1)

Matt Bodily
Matt Bodily

Reputation: 6423

you need to use a jquery ajax call. 

$('#ActivityIDReturn').change(function(){
    $.ajax({
        url: '@Url.Action("Action", "Controller")',
        type: 'post',
        data: {
            Text: $('#TextField').val()
        },
        success: function (_result) {
            $('#TaskDesc').val(_result.foo);
        }
     });
});

I haven't done for's like you have in your fiddler. I have always done them with lamda's something like

@Html.DisplayFor(Function(m) m.TaskDesc)

which will auto generate an id of TaskDesc. You will need to look at your generated Html to make sure that the id's you call in your jquery match.

and a controller method

<HttpPost()> _
Public Function UpdateFields(Text As String) As ActionResult
    Dim model as MODELNAME = //query the database
    Return Json(New With { .foo = model.bar, .baz = model.baz });
End Function

this will fire every time the field changes so if they type a word with 10 letters it will fire 10 times. Hopefully this helps

Upvotes: 7

Related Questions